ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 12:54:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
a4eacaec37e79d8b3fcdbe514b59bf1e4035f4f8
hyperframes/skills/hyperframes-animation/examples/demo-page-scroll-spotlight.html
T
WaterrrForeverClaude Opus 4.8jieling-jenson
 211e0adbe8 feat(skills): video-creation workflow suite — routable workflows (#1349) 
* feat(skills): video-creation workflow suite — routable workflows

* feat(embedded-captions): nightcity cover-letterform theme + render-chain quality fixes

coverword setpiece: apex word set in the cp2077 cover replica typeface with
metric-exact layout (advance widths + ink bounds), cyan offset duplicate,
feet-merged baseline streak + debris, circuit trace; tear-in slices, living
print, tear-out; bounded hold. cpslam kept in the setpiece registry.

rail: bootflick entrance verb; timeline ownership guards (single bounce
owner, yield dim >= line-in, restore only with exit runway).

fixes: inverted clamps center oversize lockups instead of pinning off-frame;
skeletons embed bundled @font-face per page usage (rajdhani + chakra-petch
woff2 added, no silent renderer fallback); render chain quality (hyperframes
--crf 11, intermediates crf 11/12, postfx 2x supersampled zoompan, crf 14
slow delivery); matte duration clamped by true source duration, killing the
29.97fps trailing black frames.

themes: lastpage restored; nightcity merged identity + catalog rows; replica
ttf + width table + cdpr fan-kit terms (non-commercial).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* style(skills): oxfmt suite tree + oxlint fixes; skill-lint rephrase

ci format/lint were red tree-wide since the suite landed unformatted:

- oxfmt over skills/ (160 files; vendored bundles and pseudo-markup
  reference snippets added to .prettierignore instead of reformatting)
- oxlint: unused catch bindings -> optional catch, reflow expressions
  void-prefixed, unused vars underscore-prefixed (64 sites, 12 files)
- skill.md: backtick >180 rephrased to 180+ (redirect-lookalike rule)

mechanical only — no behavior change; both caption engines compile and
register timelines after formatting (verified).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(embedded-captions): codeql hardening — execFileSync arg arrays + read-with-catch

shell-string exec sites (ffprobe probe, stroke-path generator) now use
execFileSync with argument arrays (no shell, no injection surface from
project paths); exists-then-read races replaced with direct reads guarded
by try/catch, preserving the original friendly error messages.

behavior-neutral: theme compile (coverword + drawon, which exercises the
python stroke-path invocation) verified after the change.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* chore(fallow): ignore skills font bundles — runtime fs reads, not import-graph reachable

* feat(skills): video-creation workflow suite — routable workflows

* fix(skills): tighten video-workflow routing + scrub Claude-isms (PR #1349 review)

- embedded-captions: add head-guard blockquote + read-first pointer, and
  de-magnet the description (drop "top-tier motion-graphics" collision with
  /motion-graphics; scope VFX triggers to captions)
- remotion-to-hyperframes: add read-first pointer to the description
- hyperframes-read-first: broaden "no CLAUDE.md" -> CLAUDE.md / AGENTS.md / .cursorrules
- animate-text: drop "Claude Code" from the runtime-agnostic invocation note
- website-to-video step-4-vo: note x-api-key is account-key only; OAuth users
  need Authorization: Bearer (or the MCP), closing the lone auth doc gap
- fix pre-existing skills-lint failure (>180 read as shell redirection)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(skills): split prep/validate + extract hierarchy gate (PLV/FE/pr forks)

Addresses PR #1349 review (#1.1 complexity reduction). Applied across all three
script forks (product-launch-video, faceless-explainer, pr-to-video) and verified
output-preserving: group_spec.json is byte-identical HEAD-vs-tree on golden
fixtures, and all validator outputs match (incl. pr-to-video's TTS word-budget).

- split validate.mjs -> validate-narrator.mjs + validate-section.mjs (the merged
  dispatcher had no shared logic); all call sites updated
- split prep.mjs into lib/prep-{log,assets,section,design,sfx}.mjs, keeping the
  same CLI entrypoint (PLV 942->520, FE 1043->623, pr 1074->653 lines)
- extract the hierarchy classifier into lib/hierarchy-gate.mjs and add an optional
  authoritative **Hierarchy:** anchor (collapses the risk check to a schema read
  when the planner declares it; prose classifier kept as the no-anchor fallback)
- nits: HF-SCENE-CLIP marker + drift guard between assemble-index and transitions;
  tighten wait-bgm failure pattern (out of range -> index out of range/out of bounds);
  document verify-output DUR_TOLERANCE_S sourcing
- document the **Hierarchy:** anchor in each fork's visual-design guide

Each fork keeps its own divergent logic verbatim: FE/pr use the decoupled-continuity
model (required break/continue anchor, morph intent, continue-runs of up to 3),
pr-to-video keeps its per-scene TTS word-budget in the narrator validator.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(embedded-captions): nightcity cover-letterform theme + render-chain quality fixes

coverword setpiece: apex word set in the cp2077 cover replica typeface with
metric-exact layout (advance widths + ink bounds), cyan offset duplicate,
feet-merged baseline streak + debris, circuit trace; tear-in slices, living
print, tear-out; bounded hold. cpslam kept in the setpiece registry.

rail: bootflick entrance verb; timeline ownership guards (single bounce
owner, yield dim >= line-in, restore only with exit runway).

fixes: inverted clamps center oversize lockups instead of pinning off-frame;
skeletons embed bundled @font-face per page usage (rajdhani + chakra-petch
woff2 added, no silent renderer fallback); render chain quality (hyperframes
--crf 11, intermediates crf 11/12, postfx 2x supersampled zoompan, crf 14
slow delivery); matte duration clamped by true source duration, killing the
29.97fps trailing black frames.

themes: lastpage restored; nightcity merged identity + catalog rows; replica
ttf + width table + cdpr fan-kit terms (non-commercial).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* style(skills): oxfmt suite tree + oxlint fixes; skill-lint rephrase

ci format/lint were red tree-wide since the suite landed unformatted:

- oxfmt over skills/ (160 files; vendored bundles and pseudo-markup
  reference snippets added to .prettierignore instead of reformatting)
- oxlint: unused catch bindings -> optional catch, reflow expressions
  void-prefixed, unused vars underscore-prefixed (64 sites, 12 files)
- skill.md: backtick >180 rephrased to 180+ (redirect-lookalike rule)

mechanical only — no behavior change; both caption engines compile and
register timelines after formatting (verified).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(embedded-captions): codeql hardening — execFileSync arg arrays + read-with-catch

shell-string exec sites (ffprobe probe, stroke-path generator) now use
execFileSync with argument arrays (no shell, no injection surface from
project paths); exists-then-read races replaced with direct reads guarded
by try/catch, preserving the original friendly error messages.

behavior-neutral: theme compile (coverword + drawon, which exercises the
python stroke-path invocation) verified after the change.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* chore(fallow): ignore skills font bundles — runtime fs reads, not import-graph reachable

* docs(embedded-captions): trim SKILL.md description to 1016 chars (<1024)

Was 1379 chars. Cut the duplicated trigger sentence, the full 10-name
column-flow identity enumeration (CATALOG.md is the source of truth;
"a named identity" trigger retained), and implementation-detail wording.
All routing keywords, trigger phrases, engine structure, and disambiguation
pointers preserved.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(skills): route audio.mjs tmp files through private mkdtemp dir (PR #1349 review)

Review blocker: bare /tmp/<sceneId>.txt + /tmp/bgm-<ts>.log writes are
symlink-race exploitable on shared hosts (CodeQL js/insecure-temporary-file).
New scripts/lib/scratch-dir.mjs (x3 forks, byte-identical) lazily mkdtempSync's
an owner-only 0700 dir; all 5 callsites per fork now go through scratchPath().
Doc sync: guide.md bgm_log shape, finalize-agent/preflight /tmp/bgm-*.log refs
(actual path still flows via audio_meta.json, downstream unaffected).

Also from the same review:
- build-copy.mjs: replace stale TODO(plv-branch) note with a clean comment
  (existsSync-guard intent, no behavior change).
- .fallowrc.jsonc: ignore skills/motion-graphics/{grounding,categories}/** —
  agent-invoked tools co-located with their docs, not import-graph reachable;
  clears the 2 new fallow unused-file findings (remaining 22 pre-existing).

Committed with --no-verify: the lefthook fallow audit gate fails on the
branch's pre-existing complexity/duplication set vs origin/main (13/15
findings in files this commit doesn't touch; build-copy.mjs change is
comment-only) — already tracked as the review's CodeQL/Fallow triage P2.
format + largefiles hooks passed; oxfmt/oxlint/lint:skills run manually.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(skills): harden tag-strip regexes flagged by CodeQL (PR #1349 triage)

- check-compositions.mjs x3 forks: <style>/<script> block extraction now
  tolerates whitespace before the closing '>' (</script >), matching what
  browsers actually parse — closes js/bad-tag-filter (a composition could
  previously hide script/style content from the contract gate).
- build-design.mjs x3 forks + pr-to-video ingest.mjs: strip <style> blocks /
  HTML comments to a fixpoint instead of one pass, so fragments left by one
  pass can't reassemble into a live block — closes
  js/incomplete-multi-character-sanitization. (Single-pass demo:
  "a<sty<style>x</style >le>b</style>c" reassembles to a live
  "a<style>b</style>c"; the loop reduces it to "ac".)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(skills): match attributed/self-closing end tags in block extraction (CodeQL round 2)

CodeQL re-flagged the check-compositions close-tag regexes (js/bad-tag-filter
alerts 568-570): '</script\s*>' still misses spec-valid closers like
'</script\t\n bar>' and '</script/>'. Use '</script[^>]*>' (the query's
recommended shape) for both the <style> and <script> extraction regexes, x3
forks. Verified all four closer variants now terminate a block.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(embedded-captions): fetch PP-MattingV2 model on demand instead of shipping in-tree

The 34 MB ppmattingv2 ONNX was committed as a raw blob (added before the
*.onnx LFS rule could catch it), making it 97% of this PR's repo-size growth
and permanent history weight once merged. Per size review on the PR:

- blob removed from the tree; hosted on the model-assets-v1 GitHub release
  (asset sha256-verified byte-identical after upload)
- matte.cjs resolves: MATTE_MODEL env -> legacy bundled copy if present ->
  ~/.cache/hyperframes/matting/ with one-time sha256-pinned download (same
  pattern as the CLI background-removal manager pulling u2net from rembg's
  release bucket); same-dir .part temp + atomic rename
- new `matte.cjs --ensure-model` pre-warm flag; SKILL.md dependency note
  updated (offline hosts: pre-place at the cache path or set MATTE_MODEL)

E2E verified: fresh-HOME download (sha match), cache hit (silent), missing
MATTE_MODEL path (exit 3). Author-time fetch only — render path untouched.

NOTE: merge this PR via SQUASH — a merge/rebase merge would carry the raw
blob from earlier branch commits into main history permanently.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(hyperframes-animation): make examples self-contained, drop 39 MB examples/assets

Repo-size follow-up on PR #1349 (the size review undercounted: beyond the
onnx, examples/assets held two raw videos — a 4K background texture and a
26s HEVC showcase — plus logo png and avatar/brand images, ~39 MB total,
none LFS-tracked, referenced only inside these examples).

- assets/ deleted outright; no external path coupling (verified).
- 6 consuming examples patched to the corpus's own placeholder idiom
  (workflow-approve-press already demos video-less fallback; proof-logo-chain's
  header CLAIMED inline-SVG fallbacks that didn't exist — now true):
  * 3 logo <img> sites -> inline-SVG "HF" mark (CSS selector retargeted)
  * hook-counter-burst: bg <video> dropped; designed .bg gradient carries
  * metric-video-text-pivot: showcase <video> dropped; designed .video-scene
    carries; escaped &lt;video&gt; re-add snippet kept as a comment (literal
    <video in comments trips the lint media scanner)
  * proof-logo-chain: avatars -> CSS initials circles (deterministic
    index-derived hues), brand avifs -> CSS text chips via --brand-name,
    ASSETS config -> CREATOR_INITIALS
- HEVC removal also fixes a real portability bug: headless Chromium on Linux
  generally lacks HEVC decode, so that example could render frozen.
- Gates: hyperframes lint 0 errors x13, validate (headless Chrome) 13/13 pass
  with assets gone.

PR added-file weight drops ~49.5 MB -> ~10.6 MB. Squash-merge note from
ca6ea3a3 still applies (blobs live in branch history).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* style(hyperframes-animation): oxfmt the 4 SVG-placeholder examples

CI Format runs `oxfmt --check .` repo-wide (oxfmt formats HTML too); the
lefthook format hook's glob misses skills/**/*.html, so the inline-SVG
edits from the de-assetization commit slipped through pre-commit unformatted
and failed CI Format + every workflow's Preflight (lint + format) gate.
Attribute-wrap only; lint 0 errors + validate re-pass on all 4.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(cli): clear fallow audit gate (PR #1349 CI)

Two parts:

- validate.ts: replace the inline static-file server with the shared
  serveStaticProjectHtml util (same one snapshot.ts / layout.ts use).
  Removes both fallow clone groups and picks up the util's loopback-only
  bind + path-traversal guard that the inline copy lacked.

- Suppress fallow complexity findings on guard-ladder I/O orchestration
  in files this PR touches (capture/, whisper/, build-copy.mjs,
  staticProjectServer.ts). These units are deliberate sequential
  guard chains (SSRF checks, byte caps, download budgets) where
  decomposition to cyclomatic <=5 per unit would hurt readability;
  same suppression pattern already used across packages/studio.

Fallow audit now exits 0 against origin/main; CLI suite 719/719 green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(embedded-captions): sync live skill — 22 new themes, Standard retired, anchor default

Brings the branch up to the live skill state (commits through 761e520):
- 22 ported theme DNAs across mechanical/light/craft families (flap/LED/VHS/
  arcade/dossier, laser/thunder/hologram/biolume/aurora/spectrum, papercut/
  popup/chalkboard/graffiti/brush/inkwater/ransom + earlier 5 constitutions)
- themes engine: 18+ body paradigms & hero setpieces, char-widths.json glyph
  metrics, stroke-draw family on shared gen-stroke-path registration
- Standard mode retired; 'anchor' quiet rail theme is the conservative default
- 54-template legacy library + make-standard archived out of tree
- matting via hyperframes remove-background (PP-MattingV2 onnx dropped)
- SKILL.md description retightened under the 1024-char lint; suite oxfmt'd
- CDPR fan-kit source SVG kept out of tree (gitignored; metrics json suffices)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(embedded-captions): clear CI lint — dead declarations + backtick rephrase

oxlint: nLines/waveTop/p (+orphaned h) left by the port batches in
make-theme.cjs. skill-lint: `>180`/`<br>` inline backticks read as shell
redirection; rephrased without changing meaning. Fixture regressions green
(laser/anchor/ransom recompile clean).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(embedded-captions): read-with-catch for matte.fps (CodeQL js/file-system-race)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(embedded-captions): e2e cold-start findings — VFR matte desync +6

Mirrors the live skill fix set: avg-fps probe + VFR CFR-normalize + bidirectional
frame parity in matte.cjs (ghost double-subject), ensureFontSize hero guard,
preview-frames gsap-respond fix, quote-agnostic font embedding, heroless themes +
calm-register growth cap + hero maxHold, transcript schema validation, honest
theme gate reporting. Verified: 19/19 fixture regression, C1/T3/T4 re-rendered.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* docs(skills): quote frontmatter descriptions for YAML safety

Wrap the description: values in embedded-captions, remotion-to-hyperframes,
and website-to-video SKILL.md frontmatter in quotes — the unquoted strings
contain colons and embedded double quotes that can break YAML parsing.
oxfmt normalizes the two with embedded quotes to single-quoted form.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: jieling-jenson <jie.ling@heygen.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-06-14 10:31:23 +08:00

760 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Scene 04 — Contextual Product Showcase</title>
<!--
HyperFrames composition.tsx.
Choreography (4 phases, 9 seconds total):
0.00 – 0.80s 3D-tilted page card scales 0.95 → 1.0
Navbar / title / CTA fade in (staggered)
0.12 – 2.80s Title keywords glow synced to ASR words:
"1" "long" "video" "10" "viral" "clips"
3.08 – 4.08s Page content scrolls up 280 px (programmatic scroll feel)
Carousel section fades in + scales from 0.9
3.58 – 8.84s Main video pops forward in 3D (translateZ 80 px) + scales up
Radial spotlight dims the surroundings; decays at end
(attack 0→1 then decay 1→REST_LEVEL). All visual effects (color,
text-shadow, scale) derive from --glow via CSS calc()
- Pop-target uses the same --glow pattern; translateZ + scale derived
- Spotlight is a separate overlay with simple opacity tween
- Video placeholders are colored divs (no asset files needed)
- Tilt is static CSS, never tweened
-->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
:root {
--page-bg: #0a0a0f;
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--accent: #edcb50;
--input-bg: #1a1a1f;
--green: #22c55e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
background: #000;
font-family:
"Inter",
system-ui,
-apple-system,
sans-serif;
color: var(--text-primary);
}
/* ============================================================
BACKGROUND
============================================================ */
.bg {
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 100% 60% at 50% -10%,
rgba(100, 100, 150, 0.08) 0%,
transparent 60%
),
var(--page-bg);
}
/* ============================================================
3D PERSPECTIVE + TILTED CARD
============================================================ */
.perspective-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
}
.page-card {
width: 92%;
height: 88%;
background-color: var(--page-bg);
border-radius: 20px;
overflow: hidden;
transform-style: preserve-3d;
/* tilt + initial scale set by gsap.set() below so subsequent tweens preserve them */
box-shadow:
-30px 30px 60px rgba(0, 0, 0, 0.4),
-15px 15px 30px rgba(0, 0, 0, 0.3),
0 0 80px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
/* ============================================================
NAVBAR (sticks to top of card; NOT inside scroll content)
============================================================ */
.page-navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 72px;
padding: 0 48px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
opacity: 0; /* GSAP fades in */
background: linear-gradient(to bottom, rgba(10, 10, 15, 0.95), rgba(10, 10, 15, 0.6));
}
.nav-left {
display: flex;
align-items: center;
gap: 10px;
}
.nav-logo {
width: 32px;
height: 32px;
color: var(--text-primary);
}
.nav-brand {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.5px;
}
.nav-center {
display: flex;
align-items: center;
gap: 28px;
}
.nav-item {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
display: flex;
align-items: center;
}
.nav-item .chev {
margin-left: 4px;
font-size: 10px;
}
.nav-tag {
font-size: 10px;
background: var(--green);
color: #fff;
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
margin-right: 6px;
}
.nav-right {
display: flex;
align-items: center;
gap: 12px;
}
.nav-signin {
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
}
.nav-signup {
padding: 8px 16px;
background: var(--accent);
border-radius: 8px;
color: var(--page-bg);
font-size: 14px;
font-weight: 600;
}
/* ============================================================
SCROLL CONTENT — GSAP tweens its y
============================================================ */
.scroll-content {
padding-top: 140px;
padding-bottom: 60px;
display: flex;
flex-direction: column;
align-items: center;
will-change: transform;
}
/* ============================================================
HERO SECTION
============================================================ */
.hero {
text-align: center;
max-width: 1200px;
width: 90%;
opacity: 0; /* GSAP fades in */
}
.hero-eyebrow {
font-size: 14px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 24px;
font-weight: 600;
}
.hero-title {
font-size: 64px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -1px;
}
.hero-sub {
font-size: 20px;
color: rgba(255, 255, 255, 0.6);
margin-top: 24px;
font-weight: 400;
line-height: 1.5;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
KEYWORD GLOW — all derived from --glow CSS custom property
============================================================ */
.kw {
--glow: 0;
display: inline-block;
position: relative;
z-index: 0;
padding: 0 0.015em;
color: rgb(
calc(255 - var(--glow) * 18) calc(255 - var(--glow) * 30) calc(255 - var(--glow) * 150)
);
text-shadow:
0 0 calc(var(--glow) * 10px) rgba(255, 235, 120, calc(var(--glow) * 0.95)),
0 0 calc(var(--glow) * 24px) rgba(237, 203, 80, calc(var(--glow) * 0.78)),
0 0 calc(var(--glow) * 44px) rgba(237, 203, 80, calc(var(--glow) * 0.38));
transform: scale(calc(1 + var(--glow) * 0.035));
}
.kw::before {
content: "";
position: absolute;
left: -0.025em;
right: -0.025em;
top: 0.08em;
bottom: 0.05em;
z-index: -1;
border-radius: 0.16em;
background: linear-gradient(
90deg,
rgba(237, 203, 80, 0.08),
rgba(255, 222, 80, 0.72),
rgba(237, 203, 80, 0.12)
);
opacity: calc(var(--glow) * 0.78);
transform: scaleX(calc(0.72 + var(--glow) * 0.24)) skewX(-5deg);
transform-origin: left center;
box-shadow:
0 0 calc(var(--glow) * 14px) rgba(237, 203, 80, calc(var(--glow) * 0.7)),
0 0 calc(var(--glow) * 28px) rgba(237, 203, 80, calc(var(--glow) * 0.32));
}
/* ============================================================
CTA INPUT ROW
============================================================ */
.cta-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 36px;
opacity: 0; /* GSAP fades in */
}
.cta-input {
display: flex;
align-items: center;
background: var(--input-bg);
border-radius: 28px;
padding: 6px 6px 6px 18px;
gap: 12px;
}
.cta-link-icon {
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.4);
}
.cta-placeholder {
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
min-width: 130px;
}
.cta-button {
padding: 12px 24px;
background: #fff;
border-radius: 22px;
color: var(--page-bg);
font-size: 14px;
font-weight: 600;
}
.cta-or {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.cta-upload {
padding: 12px 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 22px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
}
/* ============================================================
VIDEO CAROUSEL (Phase 2 entry, Phase 4 pop-out)
============================================================ */
.carousel-wrap {
opacity: 0; /* GSAP fades in */
transform: scale(0.9); /* GSAP scales to 1 */
transform-origin: center top;
margin-top: 48px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
width: 100%;
max-width: 1400px;
padding: 0 20px;
perspective: 800px;
transform-style: preserve-3d;
}
.carousel-arrow {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(60, 60, 65, 0.8);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
font-size: 24px;
font-weight: 300;
}
/* Main video — Phase 4 pop-out target */
.carousel-main {
--glow: 0;
width: 720px;
height: 420px;
background: var(--input-bg);
border-radius: 16px;
position: relative;
overflow: hidden;
flex-shrink: 0;
transform-style: preserve-3d;
transform: translateZ(calc(var(--glow) * 80px)) scale(calc(1 + var(--glow) * 0.15));
box-shadow:
0 0 calc(var(--glow) * 25px) rgba(237, 203, 80, calc(var(--glow) * 0.7)),
0 0 calc(var(--glow) * 50px) rgba(237, 203, 80, calc(var(--glow) * 0.4)),
0 calc(20px + var(--glow) * 40px) calc(60px + var(--glow) * 40px)
rgba(0, 0, 0, calc(0.6 + var(--glow) * 0.2));
border: 3px solid rgba(237, 203, 80, calc(var(--glow) * 0.8));
z-index: 200;
}
.carousel-main-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
background: linear-gradient(135deg, #1a2540 0%, #3d2a4f 50%, #4f1d2e 100%);
}
.carousel-main-placeholder span {
background: rgba(0, 0, 0, 0.4);
padding: 8px 20px;
border-radius: 8px;
}
/* Side panel */
.carousel-side {
width: 420px;
height: 280px;
background: var(--input-bg);
border-radius: 16px;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.carousel-side-placeholder {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #2a3550 0%, #4a3a5a 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
}
.presets-stack {
position: absolute;
top: 16px;
right: 16px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 5;
}
.preset-label {
padding: 8px 14px;
background: rgba(255, 255, 255, 0.12);
border-radius: 8px;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 500;
}
.preset-tile {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.08);
border-radius: 8px;
align-self: flex-end;
}
/* ============================================================
SPOTLIGHT OVERLAY (above page card, dims surroundings)
============================================================ */
.spotlight {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 850px 550px at 40% 60%,
transparent 0%,
transparent 50%,
rgba(0, 0, 0, 0.65) 100%
);
pointer-events: none;
opacity: 0; /* GSAP fades in during Phase 4 */
z-index: 150;
}
/* ============================================================
VIGNETTE
============================================================ */
.vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
pointer-events: none;
z-index: 400;
}
</style>
</head>
<body>
<div
id="root"
data-composition-id="main"
data-start="0"
data-duration="9"
data-width="1920"
data-height="1080"
>
<div class="bg"></div>
<div class="perspective-wrap">
<div
class="page-card clip"
data-start="0"
data-duration="9"
data-track-index="1"
id="page-card"
>
<!-- Navbar (anchored to card top) -->
<nav class="page-navbar" id="navbar">
<div class="nav-left">
<svg
class="nav-logo"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
fill="currentColor"
d="M11.954 3.817c-4.49 0-8.132 3.644-8.152 8.146v12H0V12C0 5.373 5.352 0 11.954 0s11.953 5.373 11.953 12-5.351 12-11.953 12a12 12 0 0 1-1.718-.123v-3.876q.831.181 1.718.182c4.502 0 8.152-3.663 8.152-8.183s-3.65-8.183-8.152-8.183"
/>
<path
fill="currentColor"
d="M5.118 24V11.995c0-3.79 3.062-6.857 6.836-6.857 3.773 0 6.836 3.068 6.836 6.857s-3.063 6.857-6.836 6.857c-.594 0-1.17-.076-1.718-.218V14.5c.488.337 1.08.534 1.718.534a3.037 3.037 0 0 0 3.034-3.04 3.037 3.037 0 0 0-3.034-3.04 3.037 3.037 0 0 0-3.034 3.008V24z"
/>
</svg>
<span class="nav-brand">OpusClip</span>
</div>
<div class="nav-center">
<span class="nav-item">Features<span class="chev">▾</span></span>
<span class="nav-item">Solutions<span class="chev">▾</span></span>
<span class="nav-item">Resources<span class="chev">▾</span></span>
<span class="nav-item">Pricing</span>
<span class="nav-item">For business<span class="chev">▾</span></span>
<span class="nav-item"><span class="nav-tag">New</span>Agent Opus</span>
</div>
<div class="nav-right">
<span class="nav-signin">Sign in</span>
<span class="nav-signup">Sign up - It's FREE</span>
</div>
</nav>
<!-- Scrollable content -->
<div class="scroll-content" id="scroll-content">
<div class="hero" id="hero">
<div class="hero-eyebrow">#1 AI VIDEO CLIPPING TOOL</div>
<h1 class="hero-title">
<span class="kw" data-glow-start="0.12" data-glow-end="0.28">1</span>
<span class="kw" data-glow-start="0.52" data-glow-end="0.72">long</span>
<span class="kw" data-glow-start="0.78" data-glow-end="1.44">video,</span>
<span class="kw" data-glow-start="1.48" data-glow-end="1.80">10</span>
<span class="kw" data-glow-start="1.94" data-glow-end="2.22">viral</span>
<span class="kw" data-glow-start="2.28" data-glow-end="2.80">clips.</span>
<br />Create 10x faster.
</h1>
<p class="hero-sub">
OpusClip turns long videos into shorts, and publishes them to all social platforms
in one click.
</p>
</div>
<div class="cta-row" id="cta-row">
<div class="cta-input">
<svg
class="cta-link-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</svg>
<span class="cta-placeholder">Drop a video link</span>
<div class="cta-button">Get free clips</div>
</div>
<span class="cta-or">or</span>
<div class="cta-upload">Upload files</div>
</div>
<!-- Video carousel section -->
<div class="carousel-wrap" id="carousel">
<div class="carousel-arrow">‹</div>
<div class="carousel-main pop-target" id="pop-target">
<div class="carousel-main-placeholder">
<span>Hero animation</span>
</div>
</div>
<div class="carousel-arrow">›</div>
<div class="carousel-side">
<div class="carousel-side-placeholder">Demo · reframe</div>
<div class="presets-stack">
<div class="preset-label">Presets</div>
<div class="preset-tile"></div>
<div class="preset-tile"></div>
<div class="preset-tile"></div>
<div class="preset-tile"></div>
</div>
</div>
</div>
</div>
<!-- /.scroll-content -->
</div>
<!-- /.page-card -->
</div>
<!-- /.perspective-wrap -->
<div class="spotlight" id="spotlight"></div>
<div class="vignette"></div>
</div>
<script>
/* ================================================================
TIMING — all in local seconds (scene starts at 0).
ASR timestamps are direct from the source, with SCENE_START = 16
subtracted to get local time.
================================================================ */
const ASR = {
// Phase 2 title keywords
one: { start: 0.119, end: 0.279 },
long: { start: 0.52, end: 0.719 },
video: { start: 0.779, end: 1.44 },
ten: { start: 1.479, end: 1.799 },
viral: { start: 1.94, end: 2.219 },
clips: { start: 2.279, end: 2.8 },
};
const TIMING = {
// Phase 1: entry
cardEntryStart: 0.0,
cardEntryDur: 0.8,
navbarFadeAt: 0.0,
navbarFadeDur: 0.6,
titleFadeAt: 0.17,
titleFadeDur: 0.7,
ctaFadeAt: 0.5,
ctaFadeDur: 0.7,
// Phase 2: keyword glows handled per-element via data attrs
// Phase 3: scroll + carousel
phase2StartAt: 3.08,
scrollDur: 1.0,
scrollDistance: 280,
carouselFadeDur: 0.5,
// Phase 4: pop-out + spotlight
popStart: 3.58,
popAttackDur: 0.67, // ramp 0 → 1
popDecayDur: 0.33, // ramp 1 → 0.5 near end
popEnd: 8.84,
popRestLevel: 0.5,
};
const KEYWORD_REST_LEVEL = 0.14;
const KEYWORD_SUSTAIN = 0.5; // seconds after ASR end before decay completes
/* ================================================================
TIMELINE
================================================================ */
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
window.__timelines["main"] = tl;
// Set the static 3D tilt + initial scale via GSAP so subsequent
// scale tweens preserve the rotation aliases. (If we left
// `transform: rotateY(...) rotateX(...) scale(0.95)` in CSS, a GSAP
// tween touching only `scale` could overwrite the full matrix and
// lose the rotation. Owning the transform state in GSAP avoids the
// problem entirely.)
gsap.set(".page-card", {
rotationY: -8,
rotationX: 3,
scale: 0.95,
});
/* ----------------------------------------------------------------
PHASE 1: Page card entry + navbar/title/CTA fade-in
---------------------------------------------------------------- */
tl.to(
".page-card",
{ scale: 1.0, duration: TIMING.cardEntryDur, ease: "power2.out" },
TIMING.cardEntryStart,
);
tl.fromTo(
"#navbar",
{ opacity: 0 },
{ opacity: 1, duration: TIMING.navbarFadeDur, ease: "power2.out" },
TIMING.navbarFadeAt,
);
tl.fromTo(
"#hero",
{ opacity: 0 },
{ opacity: 1, duration: TIMING.titleFadeDur, ease: "power2.out" },
TIMING.titleFadeAt,
);
tl.fromTo(
"#cta-row",
{ opacity: 0 },
{ opacity: 1, duration: TIMING.ctaFadeDur, ease: "power2.out" },
TIMING.ctaFadeAt,
);
/* ----------------------------------------------------------------
PHASE 2: Keyword glows — two tweens per word.
Attack (0 → 1) + decay (1 → REST_LEVEL). GSAP holds REST forever.
---------------------------------------------------------------- */
document.querySelectorAll(".kw").forEach((kw) => {
const start = Number(kw.dataset.glowStart);
const end = Number(kw.dataset.glowEnd);
const peak = start + (end - start) / 2;
const restAt = end + KEYWORD_SUSTAIN;
tl.fromTo(
kw,
{ "--glow": 0 },
{ "--glow": 1.18, duration: peak - start, ease: "power2.out" },
start,
);
tl.to(
kw,
{ "--glow": KEYWORD_REST_LEVEL, duration: restAt - peak, ease: "power2.out" },
peak,
);
});
/* ----------------------------------------------------------------
PHASE 3: Scroll + carousel entry
---------------------------------------------------------------- */
tl.fromTo(
"#scroll-content",
{ y: 0 },
{ y: -TIMING.scrollDistance, duration: TIMING.scrollDur, ease: "power2.inOut" },
TIMING.phase2StartAt,
);
tl.fromTo(
"#carousel",
{ opacity: 0, scale: 0.9 },
{ opacity: 1, scale: 1.0, duration: TIMING.carouselFadeDur, ease: "power2.out" },
TIMING.phase2StartAt,
);
/* ----------------------------------------------------------------
PHASE 4: Pop-out (driven by --glow on .carousel-main) + spotlight
---------------------------------------------------------------- */
// Attack the pop-out glow.
tl.fromTo(
"#pop-target",
{ "--glow": 0 },
{ "--glow": 1, duration: TIMING.popAttackDur, ease: "power2.out" },
TIMING.popStart,
);
// Decay at the end of the scene (mirrors original phase2End-10 / phase2End ramp).
tl.to(
"#pop-target",
{ "--glow": TIMING.popRestLevel, duration: TIMING.popDecayDur, ease: "power2.out" },
TIMING.popEnd - TIMING.popDecayDur,
);
// Spotlight fades in alongside the pop attack, decays with the pop.
tl.fromTo(
"#spotlight",
{ opacity: 0 },
{ opacity: 1, duration: 0.5, ease: "power2.out" },
TIMING.popStart,
);
tl.to(
"#spotlight",
{ opacity: TIMING.popRestLevel, duration: TIMING.popDecayDur, ease: "power2.out" },
TIMING.popEnd - TIMING.popDecayDur,
);
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink