heygen-com--hyperframes
wehub-resource-sync
85453da49f
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
1299 行
50 KiB
HTML
1299 行
50 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=1920, height=1080" />
|
||
<title>Scene — HyperFrames CTA Orbit Collapse</title>
|
||
|
||
<!--
|
||
Blueprint: cta-orbit-collapse (HyperFrames preview)
|
||
Six HyperFrames technology categories orbit a central "Drop an HTML
|
||
scene · Render" CTA. A cursor flies in, clicks, the icons collapse,
|
||
and a demo card springs out from the collapse point — all in 6.5s.
|
||
|
||
Palette: mirrors scene-05-orbit-collapse-action.tsx
|
||
Background: near-black frosted glass (#0A0A0F base + violet/cyan/pink
|
||
glow blobs + rgba(15,15,25,0.35) frosted tint).
|
||
Brand: Tailwind violet ramp
|
||
#c4b5fd (300) → #a78bfa (400) → #8b5cf6 (500) → #7c3aed (600)
|
||
matching COLORS.brand.purple / purpleGlow in the source.
|
||
CTA card: rgba(20,20,30,0.8) — scene-05 inner CTA dark glass.
|
||
CTA button: white fill, #0A0A0F text — identical to scene-05.
|
||
|
||
Six orbiting tech icons (driven by ICONS array, evenly spaced 2π/6):
|
||
HTML angle 0, delay 0.00s — angle brackets + center slash
|
||
CSS angle π/3, delay 0.10s — rounded frame + 3 color swatches
|
||
SVG angle 2π/3, delay 0.20s — bezier curve + 2 anchor points
|
||
GSAP angle π, delay 0.30s — sine wave timeline + playhead
|
||
3D angle 4π/3, delay 0.40s — isometric cube + inner facets
|
||
LOTTIE angle 5π/3, delay 0.50s — 2 diamond keyframes on timeline
|
||
|
||
Choreography (5 phases, 6.5 seconds total):
|
||
0.00 – 1.05s Six icons enter staggered with 3D flip + stroke-draw
|
||
(each 0.55s back.out(1.4) spring; outline draws via
|
||
strokeDashoffset; inner accents fade in with 0.10s
|
||
stagger 0.30s after each icon's entry begins)
|
||
0.00 – 2.95s Continuous orbit (0.25 rad/sec) with per-icon idle
|
||
wobble (±6 px y + ±2.5° rotation, damped by collapse)
|
||
1.50 – 2.20s Cursor fades in off-screen-right and slides to the
|
||
CTA's white button (back.out(1.3) overshoot landing)
|
||
2.20 – 2.46s Click — cursor (0.85) + CTA button (0.95) compress;
|
||
white boxShadow glow pulse; ripple 0.3 → 5.0 over 0.70s
|
||
2.20 – 3.05s Icons collapse toward center (back.out(1.6) ease);
|
||
radiusFactor 1 → 0, scale 1 → 0.5, opacity envelope
|
||
2.95 – 3.75s Demo card springs out from collapse point (scale 0 → 1)
|
||
3.95 – 6.50s Demo floats with finite-yoyo breathing (±8 px, ±1° tilt)
|
||
|
||
Continuous SVG enrichment (per icon, gated by entryDelay):
|
||
HTML brackets: horizontal sway ±0.6 units, period ~1.8s
|
||
CSS swatches: three dots scale ±0.18 with 1.4 rad phase offsets
|
||
SVG bezier: curve group rotation ±5°, period ~2.9s
|
||
GSAP timeline: playhead marker traverses 0→18 + wave scaleY ±0.12
|
||
3D cube: linear rotation 30°/s (continuous tumble)
|
||
LOTTIE keyframes: two diamonds scale ±0.12 with 1.6 rad phase offset
|
||
|
||
Continuous ambient accents (single scene-ticker writes all):
|
||
Per-icon tile glow pulse (base 22px ±12px, phased by icon index)
|
||
CTA breathing aura (base 38px ±26px, frozen at click)
|
||
Demo glow pulse (base 72px ±28px, runs after demo emerges)
|
||
Background radial wash (opacity 0.02 ↔ 0.42, period ~11.4s)
|
||
-->
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
||
<style>
|
||
:root {
|
||
/* Palette mirrors scene-05-orbit-collapse-action.tsx — Tailwind violet
|
||
ramp on a near-black frosted-glass base, matching COLORS.brand.purple
|
||
and CTA_COLORS in */
|
||
--bg-dark: #0a0a0f;
|
||
--text-primary: #ffffff;
|
||
--text-muted: rgba(255, 255, 255, 0.4);
|
||
--brand-purple: #8b5cf6; /* violet-500 — COLORS.brand.purple */
|
||
--brand-purple-light: #a78bfa; /* violet-400 */
|
||
--brand-purple-soft: #c4b5fd; /* violet-300 */
|
||
--brand-purple-deep: #7c3aed; /* violet-600 */
|
||
--brand-purple-glow: rgba(139, 92, 246, 0.6);
|
||
--glass-bg: rgba(255, 255, 255, 0.08); /* matches CTA_COLORS.inputBg */
|
||
--glass-border: rgba(139, 92, 246, 0.4); /* matches scene-05 icon border */
|
||
--cta-dark-bg: rgba(20, 20, 30, 0.8); /* scene-05 CTA card background */
|
||
--record-red: #ef4444;
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
background: var(--bg-dark);
|
||
font-family:
|
||
"Inter",
|
||
system-ui,
|
||
-apple-system,
|
||
sans-serif;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* ============================================================
|
||
BACKGROUND — frosted glass over near-black base.
|
||
Mirrors scene-05 (FrostedGlassBackground): a deep dark radial
|
||
base + violet/cyan/pink glow blobs + a frosted overlay tint.
|
||
The blobs are static here (no per-frame jitter) to keep the
|
||
seek-safe contract; the orbit/CTA on top carries all motion.
|
||
============================================================ */
|
||
.stage {
|
||
position: absolute;
|
||
inset: 0;
|
||
perspective: 1400px;
|
||
}
|
||
.bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
/* mirrored violet blobs — left + right symmetry so the wash
|
||
reads as a single coherent purple atmosphere rather than
|
||
a directional glow. */
|
||
radial-gradient(circle at 25% 40%, rgba(139, 92, 246, 0.55), transparent 55%),
|
||
radial-gradient(circle at 75% 40%, rgba(139, 92, 246, 0.55), transparent 55%),
|
||
/* deeper violet pool at the bottom centerline */
|
||
radial-gradient(ellipse 80% 50% at 50% 90%, rgba(124, 58, 237, 0.35), transparent 65%),
|
||
/* deep dark base */
|
||
radial-gradient(
|
||
ellipse 120% 100% at 50% 20%,
|
||
rgba(30, 30, 45, 1) 0%,
|
||
rgba(18, 18, 28, 1) 40%,
|
||
rgba(10, 10, 15, 1) 100%
|
||
);
|
||
}
|
||
.bg::after {
|
||
/* frosted overlay tint — emulates the rgba(15,15,25,0.4) layer
|
||
in scene-02's DarkFrostedGlassBackground. */
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(15, 15, 25, 0.35);
|
||
pointer-events: none;
|
||
}
|
||
.bg-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(10, 10, 15, 0.3);
|
||
}
|
||
|
||
/* ============================================================
|
||
ORBIT ICONS — three nested wrappers per icon.
|
||
.icon-pos ← orbit x/y from master onUpdate
|
||
.icon-collapse ← collapse scale/opacity from master onUpdate
|
||
.icon-entry ← 3D-flip entry from per-icon fromTo tween
|
||
============================================================ */
|
||
.orbit-stage {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
.icon-pos {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 140px;
|
||
height: 170px;
|
||
margin: -85px 0 0 -70px; /* recenter the 140×170 box */
|
||
perspective: 800px;
|
||
will-change: transform;
|
||
}
|
||
.icon-collapse {
|
||
width: 100%;
|
||
height: 100%;
|
||
will-change: transform, opacity;
|
||
}
|
||
.icon-entry {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
transform-style: preserve-3d;
|
||
will-change: transform, opacity;
|
||
}
|
||
.icon-tile {
|
||
width: 110px;
|
||
height: 110px;
|
||
border-radius: 26px;
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid var(--glass-border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow:
|
||
0 15px 40px rgba(0, 0, 0, 0.35),
|
||
0 0 32px var(--brand-purple-glow),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
}
|
||
.icon-svg {
|
||
width: 60px;
|
||
height: 60px;
|
||
display: block;
|
||
}
|
||
.icon-label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
text-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
|
||
}
|
||
|
||
/* SVG inner-element transform origins (in viewBox units).
|
||
Each origin is the geometric center of the element it animates
|
||
(the path's bbox center, or for circles, the cx/cy point). */
|
||
.html-brackets-g {
|
||
transform-origin: 12px 12px;
|
||
}
|
||
.css-dot-a {
|
||
transform-origin: 8px 9px;
|
||
}
|
||
.css-dot-b {
|
||
transform-origin: 16px 9px;
|
||
}
|
||
.css-dot-c {
|
||
transform-origin: 12px 16px;
|
||
}
|
||
.svg-curve-g {
|
||
transform-origin: 12px 12px;
|
||
}
|
||
.gsap-wave-g {
|
||
transform-origin: 12px 12px;
|
||
}
|
||
.gsap-marker {
|
||
transform-origin: 3px 12px;
|
||
}
|
||
.three-cube-g {
|
||
transform-origin: 12px 12px;
|
||
}
|
||
.lottie-kf-a {
|
||
transform-origin: 8px 12px;
|
||
}
|
||
.lottie-kf-b {
|
||
transform-origin: 16px 12px;
|
||
}
|
||
|
||
/* ============================================================
|
||
CENTER CTA — Drop a video link · Get free clips
|
||
============================================================ */
|
||
.cta {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
/* xPercent/yPercent set by GSAP for centering — so GSAP rotateY
|
||
doesn't overwrite a CSS translate(-50%,-50%). */
|
||
z-index: 5;
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--cta-dark-bg); /* rgba(20,20,30,0.8) — scene-05 */
|
||
backdrop-filter: blur(14px);
|
||
border-radius: 36px;
|
||
padding: 10px 10px 10px 28px;
|
||
gap: 16px;
|
||
border: 1px solid var(--glass-border);
|
||
box-shadow:
|
||
0 40px 80px rgba(0, 0, 0, 0.5),
|
||
0 0 60px var(--brand-purple-glow),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
transform-style: preserve-3d;
|
||
will-change: transform, opacity;
|
||
}
|
||
.cta-link-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
color: var(--text-muted);
|
||
filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
|
||
}
|
||
.cta-placeholder {
|
||
font-size: 22px;
|
||
color: var(--text-muted);
|
||
min-width: 220px;
|
||
font-weight: 500;
|
||
}
|
||
.cta-button {
|
||
padding: 18px 36px;
|
||
background: #ffffff;
|
||
border-radius: 28px;
|
||
color: #0a0a0f; /* scene-05 button text */
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
box-shadow:
|
||
0 0 30px rgba(255, 255, 255, 0.35),
|
||
inset 0 -2px 6px rgba(139, 92, 246, 0.15);
|
||
will-change: transform, box-shadow;
|
||
}
|
||
|
||
/* ============================================================
|
||
RIPPLE — centered on the CTA's white button.
|
||
Button center sits at (CENTER_X + 130, CENTER_Y + 15) — same target
|
||
as the cursor's CURSOR_TARGET. Margin offsets re-center the 120 px
|
||
ring on that point. Avoid `margin` shorthand here so the offsets
|
||
can't be overridden by a stray longhand later.
|
||
============================================================ */
|
||
.ripple {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 120px;
|
||
height: 120px;
|
||
margin-top: -45px; /* = -60 (recenter) + 15 (y offset to button) */
|
||
margin-left: 70px; /* = -60 (recenter) + 130 (x offset to button) */
|
||
margin-right: 0;
|
||
margin-bottom: 0;
|
||
border: 2px solid rgba(255, 255, 255, 0.7);
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
z-index: 6;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
/* ============================================================
|
||
CURSOR — top layer, opacity 0 until Phase 2
|
||
============================================================ */
|
||
.cursor {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 999;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
/* ============================================================
|
||
DEMO — appears from the collapse point in Phase 4
|
||
============================================================ */
|
||
.demo {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 800px;
|
||
height: 450px;
|
||
margin: -225px 0 0 -400px;
|
||
z-index: 10;
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
background:
|
||
radial-gradient(ellipse at 22% 28%, rgba(139, 92, 246, 0.45), transparent 62%),
|
||
radial-gradient(ellipse at 78% 72%, rgba(124, 58, 237, 0.45), transparent 62%),
|
||
linear-gradient(135deg, rgba(20, 20, 30, 0.92) 0%, rgba(10, 10, 15, 0.95) 100%);
|
||
border: 1px solid var(--glass-border);
|
||
box-shadow:
|
||
0 50px 100px rgba(0, 0, 0, 0.5),
|
||
0 0 60px var(--brand-purple-glow),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* Initial scale: 0 / opacity: 0 set by GSAP — no CSS transform here to avoid
|
||
GSAP overwriting `translateX(-50%)` style centering. We use left/top + margin
|
||
for static centering instead. */
|
||
transform-style: preserve-3d;
|
||
will-change: transform, opacity;
|
||
}
|
||
.demo-play {
|
||
width: 118px;
|
||
height: 118px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ede9fe 60%, #c4b5fd 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow:
|
||
0 0 80px rgba(139, 92, 246, 0.7),
|
||
0 0 180px rgba(139, 92, 246, 0.4),
|
||
0 18px 40px rgba(0, 0, 0, 0.5),
|
||
inset 0 -4px 14px rgba(124, 58, 237, 0.3),
|
||
inset 0 3px 8px rgba(255, 255, 255, 0.95);
|
||
position: relative;
|
||
}
|
||
.demo-play::after {
|
||
/* outer ring — adds depth without breaking the seek-safe layout */
|
||
content: "";
|
||
position: absolute;
|
||
inset: -10px;
|
||
border-radius: 50%;
|
||
border: 1.5px solid rgba(139, 92, 246, 0.65);
|
||
box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
|
||
pointer-events: none;
|
||
}
|
||
.demo-play svg {
|
||
width: 44px;
|
||
height: 44px;
|
||
color: #0a0a0f;
|
||
transform: translateX(3px); /* optical center for play triangle */
|
||
filter: drop-shadow(0 1px 2px rgba(124, 58, 237, 0.5));
|
||
}
|
||
.demo-label {
|
||
position: absolute;
|
||
bottom: 28px;
|
||
left: 32px;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 50%, #8b5cf6 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
|
||
}
|
||
|
||
/* ============================================================
|
||
VIGNETTE
|
||
============================================================ */
|
||
.vignette {
|
||
/* scene-05 vignette: transparent 40% → rgba(0,0,0,0.4) at edges */
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
|
||
pointer-events: none;
|
||
z-index: 50;
|
||
}
|
||
|
||
/* ============================================================
|
||
TITLE — centered via xPercent in GSAP (not CSS translateX),
|
||
so the GSAP `y` tween doesn't overwrite the centering transform.
|
||
Single line at 96 px; the brand wordmark ("HyperFrames") uses
|
||
the HyperFrames teal gradient + heavy weight, the tagline
|
||
("renders any scene") stays in soft white-teal for contrast.
|
||
No filter — crisp edges, no blurred halo.
|
||
============================================================ */
|
||
.title {
|
||
position: absolute;
|
||
top: 64px;
|
||
left: 50%;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
font-size: 96px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.022em;
|
||
line-height: 1;
|
||
color: #ffffff;
|
||
text-shadow:
|
||
0 0 24px rgba(255, 255, 255, 0.3),
|
||
0 0 60px rgba(139, 92, 246, 0.45); /* scene-05 brand.purpleGlow */
|
||
z-index: 20;
|
||
will-change: transform, opacity;
|
||
}
|
||
.title-brand {
|
||
font-weight: 800;
|
||
/* Violet ramp matching scene-05's COLORS.brand.purple family */
|
||
background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 35%, #a78bfa 65%, #8b5cf6 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
filter: drop-shadow(0 0 28px rgba(139, 92, 246, 0.7))
|
||
drop-shadow(0 0 60px rgba(124, 58, 237, 0.5));
|
||
}
|
||
|
||
/* ============================================================
|
||
ENHANCEMENTS — stroke-draw entry, stagger reveal,
|
||
ambient background breathing.
|
||
The .draw-N classes preset stroke-dasharray + stroke-dashoffset
|
||
to N so the path starts fully hidden; GSAP animates offset → 0
|
||
to reveal it in time with the icon's 3D-flip entry.
|
||
============================================================ */
|
||
.draw-50 {
|
||
stroke-dasharray: 50;
|
||
stroke-dashoffset: 50;
|
||
}
|
||
.draw-100 {
|
||
stroke-dasharray: 100;
|
||
stroke-dashoffset: 100;
|
||
}
|
||
.draw-150 {
|
||
stroke-dasharray: 150;
|
||
stroke-dashoffset: 150;
|
||
}
|
||
.draw-200 {
|
||
stroke-dasharray: 200;
|
||
stroke-dashoffset: 200;
|
||
}
|
||
|
||
.reveal-late {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Ambient violet breathing — sits over the dark overlay, under
|
||
the orbit ring; opacity driven by the scene-ticker onUpdate. */
|
||
.bg-pulse {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.35), transparent 62%);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
will-change: opacity;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div
|
||
id="root"
|
||
data-composition-id="main"
|
||
data-start="0"
|
||
data-duration="6.5"
|
||
data-width="1920"
|
||
data-height="1080"
|
||
>
|
||
<div
|
||
id="orbit-scene"
|
||
class="stage clip"
|
||
data-start="0"
|
||
data-duration="6.5"
|
||
data-track-index="1"
|
||
>
|
||
<div class="bg"></div>
|
||
|
||
<!-- ============================================================
|
||
ORBIT ICONS — 6 genre icons distributed evenly around 2π
|
||
============================================================ -->
|
||
<div class="orbit-stage">
|
||
<!-- 1. HTML — angle brackets + diagonal slash -->
|
||
<div class="icon-pos icon-html">
|
||
<div class="icon-collapse">
|
||
<div class="icon-entry">
|
||
<div class="icon-tile">
|
||
<svg class="icon-svg" viewBox="0 0 24 24" fill="none">
|
||
<g class="html-brackets-g">
|
||
<path
|
||
class="draw-50"
|
||
d="M8 7 L3 12 L8 17"
|
||
stroke="url(#g-html)"
|
||
stroke-width="2.2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
<path
|
||
class="draw-50"
|
||
d="M16 7 L21 12 L16 17"
|
||
stroke="url(#g-html)"
|
||
stroke-width="2.2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</g>
|
||
<line
|
||
class="reveal-late html-slash"
|
||
x1="14"
|
||
y1="5"
|
||
x2="10"
|
||
y2="19"
|
||
stroke="url(#g-html)"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
/>
|
||
<defs>
|
||
<linearGradient id="g-html" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#a78bfa" />
|
||
<stop offset="100%" stop-color="#8b5cf6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<span class="icon-label">HTML</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. CSS — frame with three color swatches -->
|
||
<div class="icon-pos icon-css">
|
||
<div class="icon-collapse">
|
||
<div class="icon-entry">
|
||
<div class="icon-tile">
|
||
<svg class="icon-svg" viewBox="0 0 24 24" fill="none">
|
||
<rect
|
||
class="draw-100"
|
||
x="3"
|
||
y="3"
|
||
width="18"
|
||
height="18"
|
||
rx="3"
|
||
stroke="url(#g-css)"
|
||
stroke-width="2"
|
||
fill="rgba(139, 92, 246, 0.18)"
|
||
/>
|
||
<circle class="reveal-late css-dot-a" cx="8" cy="9" r="1.9" fill="#c4b5fd" />
|
||
<circle class="reveal-late css-dot-b" cx="16" cy="9" r="1.9" fill="#a78bfa" />
|
||
<circle class="reveal-late css-dot-c" cx="12" cy="16" r="1.9" fill="#7c3aed" />
|
||
<defs>
|
||
<linearGradient id="g-css" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#c4b5fd" />
|
||
<stop offset="100%" stop-color="#8b5cf6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<span class="icon-label">CSS</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. SVG — bezier curve with anchor points -->
|
||
<div class="icon-pos icon-vector">
|
||
<div class="icon-collapse">
|
||
<div class="icon-entry">
|
||
<div class="icon-tile">
|
||
<svg class="icon-svg" viewBox="0 0 24 24" fill="none">
|
||
<g class="svg-curve-g">
|
||
<path
|
||
class="draw-100"
|
||
d="M4 19 C 8 5, 16 19, 20 5"
|
||
stroke="url(#g-vec)"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
fill="none"
|
||
/>
|
||
<circle
|
||
class="reveal-late svg-anchor-a"
|
||
cx="4"
|
||
cy="19"
|
||
r="2.2"
|
||
stroke="url(#g-vec)"
|
||
stroke-width="1.5"
|
||
fill="rgba(139, 92, 246, 0.30)"
|
||
/>
|
||
<circle
|
||
class="reveal-late svg-anchor-b"
|
||
cx="20"
|
||
cy="5"
|
||
r="2.2"
|
||
stroke="url(#g-vec)"
|
||
stroke-width="1.5"
|
||
fill="rgba(139, 92, 246, 0.30)"
|
||
/>
|
||
</g>
|
||
<defs>
|
||
<linearGradient id="g-vec" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#c4b5fd" />
|
||
<stop offset="100%" stop-color="#7c3aed" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<span class="icon-label">SVG</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. GSAP — sine wave timeline with playhead marker -->
|
||
<div class="icon-pos icon-gsap">
|
||
<div class="icon-collapse">
|
||
<div class="icon-entry">
|
||
<div class="icon-tile">
|
||
<svg class="icon-svg" viewBox="0 0 24 24" fill="none">
|
||
<line
|
||
x1="3"
|
||
y1="20"
|
||
x2="21"
|
||
y2="20"
|
||
stroke="url(#g-gsap)"
|
||
stroke-width="1.2"
|
||
stroke-linecap="round"
|
||
opacity="0.4"
|
||
/>
|
||
<path
|
||
class="draw-100 gsap-wave-g"
|
||
d="M3 12 C 7 5, 9 5, 12 12 C 15 19, 17 19, 21 12"
|
||
stroke="url(#g-gsap)"
|
||
stroke-width="2.2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
fill="none"
|
||
/>
|
||
<circle class="reveal-late gsap-marker" cx="3" cy="12" r="2.2" fill="#c4b5fd" />
|
||
<defs>
|
||
<linearGradient id="g-gsap" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#a78bfa" />
|
||
<stop offset="100%" stop-color="#8b5cf6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<span class="icon-label">GSAP</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. 3D — isometric cube with inner facet lines -->
|
||
<div class="icon-pos icon-three">
|
||
<div class="icon-collapse">
|
||
<div class="icon-entry">
|
||
<div class="icon-tile">
|
||
<svg class="icon-svg" viewBox="0 0 24 24" fill="none">
|
||
<g class="three-cube-g">
|
||
<path
|
||
class="draw-100"
|
||
d="M12 3 L20 7 L20 17 L12 21 L4 17 L4 7 Z"
|
||
stroke="url(#g-three)"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
fill="rgba(139, 92, 246, 0.24)"
|
||
/>
|
||
<path
|
||
class="reveal-late three-facet"
|
||
d="M4 7 L12 11 L20 7 M12 11 L12 21"
|
||
stroke="url(#g-three)"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</g>
|
||
<defs>
|
||
<linearGradient id="g-three" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#c4b5fd" />
|
||
<stop offset="100%" stop-color="#7c3aed" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<span class="icon-label">3D</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. LOTTIE — two diamond keyframes on a timeline -->
|
||
<div class="icon-pos icon-lottie">
|
||
<div class="icon-collapse">
|
||
<div class="icon-entry">
|
||
<div class="icon-tile">
|
||
<svg class="icon-svg" viewBox="0 0 24 24" fill="none">
|
||
<line
|
||
x1="3"
|
||
y1="12"
|
||
x2="21"
|
||
y2="12"
|
||
stroke="url(#g-lottie)"
|
||
stroke-width="1.2"
|
||
stroke-linecap="round"
|
||
opacity="0.4"
|
||
/>
|
||
<path
|
||
class="draw-50 lottie-kf-a"
|
||
d="M8 8 L12 12 L8 16 L4 12 Z"
|
||
stroke="url(#g-lottie)"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
fill="rgba(139, 92, 246, 0.28)"
|
||
/>
|
||
<path
|
||
class="draw-50 lottie-kf-b"
|
||
d="M16 8 L20 12 L16 16 L12 12 Z"
|
||
stroke="url(#g-lottie)"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
fill="rgba(139, 92, 246, 0.28)"
|
||
/>
|
||
<defs>
|
||
<linearGradient id="g-lottie" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#a78bfa" />
|
||
<stop offset="100%" stop-color="#8b5cf6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<span class="icon-label">LOTTIE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
CENTER CTA — Drop a video link · Get free clips
|
||
============================================================ -->
|
||
<div class="cta">
|
||
<svg
|
||
class="cta-link-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<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 an HTML scene</span>
|
||
<div class="cta-button">Render</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
RIPPLE — centered on the CTA's white button
|
||
============================================================ -->
|
||
<div class="ripple"></div>
|
||
|
||
<!-- ============================================================
|
||
CURSOR — starts off-screen-right with opacity: 0.
|
||
White fill + black stroke matches the scene-05 cursor SVG.
|
||
============================================================ -->
|
||
<div class="cursor">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
||
<path d="M5 3L19 12L12 13L9 20L5 3Z" fill="#fff" stroke="#000" stroke-width="1.5" />
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
DEMO — appears from the collapse point in Phase 4
|
||
============================================================ -->
|
||
<div class="demo">
|
||
<div class="demo-play">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M8 5v14l11-7L8 5z" />
|
||
</svg>
|
||
</div>
|
||
<span class="demo-label">HyperFrames · MP4 ready</span>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
TITLE
|
||
============================================================ -->
|
||
<div class="title"><span class="title-brand">HyperFrames</span> renders any scene</div>
|
||
|
||
<div class="vignette"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
window.__timelines = window.__timelines || {};
|
||
const tl = gsap.timeline({ paused: true });
|
||
|
||
/* ============================================================
|
||
CONSTANTS
|
||
============================================================ */
|
||
const W = 1920,
|
||
H = 1080;
|
||
const CENTER_X = W / 2;
|
||
const CENTER_Y = H / 2;
|
||
|
||
const RADIUS_X = 480;
|
||
const RADIUS_Y = 280;
|
||
const ORBIT_SPEED = 0.25; // radians per second
|
||
|
||
// Six HyperFrames technologies arranged around the central CTA —
|
||
// each represents something you'd actually drop into a
|
||
// HyperFrames composition (markup, styling, vector graphics,
|
||
// animation engines, 3D, or animated assets).
|
||
//
|
||
// drawLen — the .draw-N class present on this icon's outline.
|
||
// The stroke-draw tween pulls strokeDashoffset from N to 0.
|
||
// When an icon has multiple .draw-N paths sharing the same N
|
||
// (HTML's two brackets, LOTTIE's two diamonds), one selector
|
||
// targets both and they draw in unison.
|
||
// hasReveal — whether this icon has .reveal-late inner accents
|
||
// to fade in late via stagger. LOTTIE has none (both diamonds
|
||
// are stroke-drawn, no extra accent).
|
||
const ICONS = [
|
||
{
|
||
sel: ".icon-html",
|
||
initialAngle: (0 * Math.PI) / 3,
|
||
entryDelay: 0.0,
|
||
drawLen: 50,
|
||
hasReveal: true,
|
||
},
|
||
{
|
||
sel: ".icon-css",
|
||
initialAngle: (1 * Math.PI) / 3,
|
||
entryDelay: 0.1,
|
||
drawLen: 100,
|
||
hasReveal: true,
|
||
},
|
||
{
|
||
sel: ".icon-vector",
|
||
initialAngle: (2 * Math.PI) / 3,
|
||
entryDelay: 0.2,
|
||
drawLen: 100,
|
||
hasReveal: true,
|
||
},
|
||
{
|
||
sel: ".icon-gsap",
|
||
initialAngle: (3 * Math.PI) / 3,
|
||
entryDelay: 0.3,
|
||
drawLen: 100,
|
||
hasReveal: true,
|
||
},
|
||
{
|
||
sel: ".icon-three",
|
||
initialAngle: (4 * Math.PI) / 3,
|
||
entryDelay: 0.4,
|
||
drawLen: 100,
|
||
hasReveal: true,
|
||
},
|
||
{
|
||
sel: ".icon-lottie",
|
||
initialAngle: (5 * Math.PI) / 3,
|
||
entryDelay: 0.5,
|
||
drawLen: 50,
|
||
hasReveal: false,
|
||
},
|
||
];
|
||
|
||
const ENTRY_DUR = 0.55;
|
||
const TITLE_AT = 0.2;
|
||
const CURSOR_AT = 1.5;
|
||
const CURSOR_MOVE = 0.5;
|
||
const CLICK_AT = 2.2;
|
||
const COLLAPSE_DUR = 0.85;
|
||
const DEMO_AT = 2.95;
|
||
const DEMO_DUR = 0.8;
|
||
const IDLE_START = 3.95;
|
||
const TOTAL = 6.5;
|
||
|
||
const COLLAPSE_EASE = gsap.parseEase("back.out(1.6)");
|
||
const ORBIT_END = DEMO_AT;
|
||
|
||
const CURSOR_START_X = W + 100;
|
||
const CURSOR_START_Y = H * 0.85;
|
||
const CURSOR_TARGET_X = CENTER_X + 130; // over the white button
|
||
const CURSOR_TARGET_Y = CENTER_Y + 15;
|
||
|
||
/* ============================================================
|
||
INITIAL STATE — embedded as tl.set calls at t=0 so the lint
|
||
can reason about them as timeline operations rather than
|
||
as overlapping zero-duration tweens.
|
||
============================================================ */
|
||
tl.set(".icon-entry", { rotateX: 90, rotateY: -45, z: -100, scale: 0, opacity: 0 }, 0);
|
||
tl.set(".cursor", { x: CURSOR_START_X, y: CURSOR_START_Y, opacity: 0 }, 0);
|
||
tl.set(".ripple", { scale: 0.3, opacity: 0 }, 0);
|
||
// CTA: GSAP-driven centering + 3D entry start state.
|
||
tl.set(".cta", { xPercent: -50, yPercent: -50, rotateY: -90, scale: 0.7, opacity: 0 }, 0);
|
||
tl.set(".demo", { scale: 0, rotateY: 90, opacity: 0 }, 0);
|
||
|
||
/* ============================================================
|
||
TITLE — slides down and fades in early.
|
||
xPercent: -50 replaces CSS `transform: translateX(-50%)` so GSAP's
|
||
tween of `y` doesn't overwrite the centering transform. fromTo is
|
||
linter-exempt from the CSS-transform-conflict rule and bakes in the
|
||
start state explicitly.
|
||
============================================================ */
|
||
tl.fromTo(
|
||
".title",
|
||
{ xPercent: -50, y: -30, opacity: 0 },
|
||
{ xPercent: -50, y: 0, opacity: 1, duration: 0.6, ease: "back.out(1.4)" },
|
||
TITLE_AT,
|
||
);
|
||
|
||
/* ============================================================
|
||
CTA — 3D flip entry. rotateY -90° → 0° spins the card in from
|
||
the right; opacity + scale ease it forward at the same time.
|
||
xPercent/yPercent set at t=0 keep it centered while GSAP owns
|
||
the transform.
|
||
============================================================ */
|
||
tl.to(
|
||
".cta",
|
||
{ rotateY: 0, scale: 1, opacity: 1, duration: 0.75, ease: "back.out(1.4)" },
|
||
0.3,
|
||
);
|
||
|
||
// Subtle Y-axis tilt while the CTA is idle waiting for the click.
|
||
// Half-cycle 0.9s, repeats yoyo until just before CLICK_AT.
|
||
tl.to(".cta", { rotateY: 5, duration: 0.9, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.05);
|
||
|
||
/* ============================================================
|
||
PHASE 1: 3D flip entry per icon
|
||
============================================================ */
|
||
ICONS.forEach(({ sel, entryDelay }) => {
|
||
tl.fromTo(
|
||
`${sel} .icon-entry`,
|
||
{ rotateX: 90, rotateY: -45, z: -100, scale: 0, opacity: 0 },
|
||
{
|
||
rotateX: 0,
|
||
rotateY: 0,
|
||
z: 0,
|
||
scale: 1,
|
||
opacity: 1,
|
||
duration: ENTRY_DUR,
|
||
ease: "back.out(1.4)",
|
||
},
|
||
entryDelay,
|
||
);
|
||
});
|
||
|
||
/* ============================================================
|
||
PHASE 1b: SVG stroke-draw per icon
|
||
Each icon has one .draw-N class on its outline path. CSS
|
||
preset the dasharray/dashoffset to N (path hidden); this
|
||
tween pulls the offset to 0, drawing the path along its
|
||
length. power2.out front-loads the reveal so the stroke
|
||
is mostly visible by the time the 3D flip settles.
|
||
============================================================ */
|
||
ICONS.forEach(({ sel, entryDelay, drawLen }) => {
|
||
tl.fromTo(
|
||
`${sel} .draw-${drawLen}`,
|
||
{ strokeDashoffset: drawLen },
|
||
{ strokeDashoffset: 0, duration: ENTRY_DUR + 0.1, ease: "power2.out" },
|
||
entryDelay,
|
||
);
|
||
});
|
||
|
||
/* ============================================================
|
||
PHASE 1c: Stagger reveal for inner accent elements
|
||
(music notes, gaming d-pad, vlog play triangle, podcast
|
||
base lines). Preset to opacity 0 via .reveal-late; this
|
||
tween fades siblings in with a 0.10s stagger so the icon
|
||
"completes itself" after its outline is drawn.
|
||
Skipped for education/sports — they have no inner accents.
|
||
============================================================ */
|
||
ICONS.forEach(({ sel, entryDelay, hasReveal }) => {
|
||
if (!hasReveal) return;
|
||
tl.fromTo(
|
||
`${sel} .reveal-late`,
|
||
{ opacity: 0 },
|
||
{ opacity: 1, duration: 0.3, ease: "power2.out", stagger: 0.1 },
|
||
entryDelay + 0.3,
|
||
);
|
||
});
|
||
|
||
/* ============================================================
|
||
PHASE 1 + 3: Master orbit + collapse engine
|
||
Single onUpdate spans from t=0 to ORBIT_END. Reads tl.time()
|
||
and computes:
|
||
- orbit angle per icon (relative to its entryDelay)
|
||
- collapse driver (eased fraction of CLICK_AT → CLICK_AT+COLLAPSE_DUR)
|
||
Writes x/y to .icon-pos and scale/opacity to .icon-collapse.
|
||
============================================================ */
|
||
tl.to(
|
||
{ tick: 0 },
|
||
{
|
||
tick: 1,
|
||
duration: ORBIT_END,
|
||
ease: "none",
|
||
onUpdate: () => {
|
||
const t = tl.time();
|
||
const collapseLinear = Math.max(0, Math.min(1, (t - CLICK_AT) / COLLAPSE_DUR));
|
||
const collapseEased = COLLAPSE_EASE(collapseLinear);
|
||
const radiusFactor = 1 - collapseEased;
|
||
const collapseScale = 1 - collapseEased * 0.5;
|
||
|
||
// Two-segment opacity envelope: 1 at 0, 0.5 at 0.8, 0 at 1
|
||
const o = collapseEased;
|
||
const collapseOpacity = o < 0.8 ? 1 - o * 0.625 : (0.5 * (1 - o)) / 0.2;
|
||
|
||
ICONS.forEach(({ sel, initialAngle, entryDelay }, i) => {
|
||
const localT = Math.max(0, t - entryDelay);
|
||
const angle = initialAngle + localT * ORBIT_SPEED;
|
||
const x = Math.cos(angle) * RADIUS_X * radiusFactor;
|
||
const y = Math.sin(angle) * RADIUS_Y * radiusFactor;
|
||
|
||
// Per-icon idle wobble — phased per index so the ring
|
||
// doesn't pulse in sync. Damped by radiusFactor so the
|
||
// wobble relaxes as icons collapse to the center.
|
||
const floatY = Math.sin(t * 1.4 + i * 1.1) * 6 * radiusFactor;
|
||
const floatRot = Math.sin(t * 1.1 + i * 1.7) * 2.5 * radiusFactor;
|
||
|
||
gsap.set(`${sel}.icon-pos`, { x, y: y + floatY });
|
||
gsap.set(`${sel} .icon-collapse`, {
|
||
scale: collapseScale,
|
||
opacity: collapseOpacity,
|
||
rotation: floatRot,
|
||
});
|
||
});
|
||
},
|
||
},
|
||
0,
|
||
);
|
||
|
||
/* ============================================================
|
||
PHASE 2: Cursor enters, slides to CTA, clicks
|
||
============================================================ */
|
||
// Fade in
|
||
tl.to(".cursor", { opacity: 1, duration: 0.1, ease: "none" }, CURSOR_AT);
|
||
|
||
// Slide to CTA button
|
||
tl.to(
|
||
".cursor",
|
||
{ x: CURSOR_TARGET_X, y: CURSOR_TARGET_Y, duration: CURSOR_MOVE, ease: "back.out(1.3)" },
|
||
CURSOR_AT,
|
||
);
|
||
|
||
// Click depression — cursor + button compress, then recover
|
||
tl.to(".cursor", { scale: 0.85, duration: 0.08, ease: "power2.out" }, CLICK_AT);
|
||
tl.to(".cursor", { scale: 1, duration: 0.18, ease: "back.out(1.6)" }, CLICK_AT + 0.08);
|
||
tl.to(".cta-button", { scale: 0.95, duration: 0.08, ease: "power2.out" }, CLICK_AT);
|
||
tl.to(".cta-button", { scale: 1, duration: 0.18, ease: "back.out(1.6)" }, CLICK_AT + 0.08);
|
||
|
||
// Button glow pulse during click
|
||
tl.fromTo(
|
||
".cta-button",
|
||
{ boxShadow: "0 0 0 rgba(255,255,255,0)" },
|
||
{ boxShadow: "0 0 40px rgba(255,255,255,0.7)", duration: 0.2, ease: "power2.out" },
|
||
CLICK_AT,
|
||
);
|
||
tl.to(
|
||
".cta-button",
|
||
{ boxShadow: "0 0 0 rgba(255,255,255,0)", duration: 0.4, ease: "power2.in" },
|
||
CLICK_AT + 0.2,
|
||
);
|
||
|
||
// Ripple — attack-decay envelope via keyframes
|
||
tl.to(
|
||
".ripple",
|
||
{
|
||
duration: 0.7,
|
||
keyframes: {
|
||
"0%": { scale: 0.3, opacity: 0 },
|
||
"20%": { opacity: 0.7 },
|
||
"100%": { scale: 5.0, opacity: 0 },
|
||
easeEach: "power2.out",
|
||
},
|
||
},
|
||
CLICK_AT,
|
||
);
|
||
|
||
/* ============================================================
|
||
PHASE 4: Demo springs out of the collapse point
|
||
============================================================ */
|
||
tl.fromTo(
|
||
".demo",
|
||
{ scale: 0, rotateY: 90, opacity: 0 },
|
||
{ scale: 1, rotateY: 0, opacity: 1, duration: DEMO_DUR, ease: "back.out(1.6)" },
|
||
DEMO_AT,
|
||
);
|
||
|
||
// CTA fades out as the demo emerges — the click's "result" replaces the action target.
|
||
tl.to(".cta", { opacity: 0, duration: 0.3, ease: "power2.in" }, DEMO_AT - 0.05);
|
||
|
||
// Cursor exits with the CTA
|
||
tl.to(".cursor", { opacity: 0, duration: 0.3, ease: "power2.in" }, DEMO_AT);
|
||
|
||
/* ============================================================
|
||
PHASE 5: Demo floats with finite-yoyo breathing
|
||
============================================================ */
|
||
const HALF_CYCLE = 1.1;
|
||
const remaining = TOTAL - IDLE_START;
|
||
const halfCycles = Math.max(0, Math.floor(remaining / HALF_CYCLE) - 1);
|
||
|
||
tl.fromTo(
|
||
".demo",
|
||
{ y: 0, rotation: 0, rotateY: 0, rotateX: 0 },
|
||
{
|
||
y: -8,
|
||
rotation: 1,
|
||
rotateY: 6,
|
||
rotateX: -2,
|
||
duration: HALF_CYCLE,
|
||
ease: "sine.inOut",
|
||
yoyo: true,
|
||
repeat: halfCycles,
|
||
},
|
||
IDLE_START,
|
||
);
|
||
|
||
/* ============================================================
|
||
CONTINUOUS INTERNAL SVG ENRICHMENT
|
||
Shared scene-ticker — one onUpdate writes all per-SVG motions.
|
||
Gated per-icon by its entryDelay so a hidden icon doesn't pay
|
||
the cost (still cheap, but cleaner intent).
|
||
============================================================ */
|
||
const htmlBrackets = document.querySelector(".html-brackets-g");
|
||
const cssDotA = document.querySelector(".css-dot-a");
|
||
const cssDotB = document.querySelector(".css-dot-b");
|
||
const cssDotC = document.querySelector(".css-dot-c");
|
||
const svgCurve = document.querySelector(".svg-curve-g");
|
||
const gsapMarker = document.querySelector(".gsap-marker");
|
||
const gsapWave = document.querySelector(".gsap-wave-g");
|
||
const threeCube = document.querySelector(".three-cube-g");
|
||
const lottieKfA = document.querySelector(".lottie-kf-a");
|
||
const lottieKfB = document.querySelector(".lottie-kf-b");
|
||
|
||
tl.to(
|
||
{ tick2: 0 },
|
||
{
|
||
tick2: 1,
|
||
duration: TOTAL,
|
||
ease: "none",
|
||
onUpdate: () => {
|
||
const t = tl.time();
|
||
|
||
// HTML brackets — tiny horizontal sway, like a typing cursor
|
||
const htmlT = t - 0.0;
|
||
if (htmlT > 0) {
|
||
gsap.set(htmlBrackets, { x: Math.sin(htmlT * 3.5) * 0.6 });
|
||
}
|
||
|
||
// CSS swatches — three dots scale-pulse with phase offsets
|
||
const cssT = t - 0.1;
|
||
if (cssT > 0) {
|
||
gsap.set(cssDotA, { scale: 0.85 + Math.sin(cssT * 5.5) * 0.18 });
|
||
gsap.set(cssDotB, { scale: 0.85 + Math.sin(cssT * 5.5 + 1.4) * 0.18 });
|
||
gsap.set(cssDotC, { scale: 0.85 + Math.sin(cssT * 5.5 + 2.8) * 0.18 });
|
||
}
|
||
|
||
// SVG bezier — whole curve group gently rotates back and forth
|
||
const vecT = t - 0.2;
|
||
if (vecT > 0) {
|
||
gsap.set(svgCurve, { rotation: Math.sin(vecT * 2.2) * 5 });
|
||
}
|
||
|
||
// GSAP timeline — playhead marker slides along the wave +
|
||
// the wave itself flexes vertically (amplitude pulse).
|
||
const gsapT = t - 0.3;
|
||
if (gsapT > 0) {
|
||
// marker traverses 0 → 18 viewBox units left-to-right
|
||
const markerX = (Math.sin(gsapT * 1.4 - Math.PI / 2) + 1) * 9;
|
||
gsap.set(gsapMarker, { x: markerX });
|
||
gsap.set(gsapWave, { scaleY: 1 + Math.sin(gsapT * 2.5) * 0.12 });
|
||
}
|
||
|
||
// 3D cube — slow continuous tumble (replaces sports-ball spin)
|
||
const threeT = t - 0.4;
|
||
if (threeT > 0) {
|
||
gsap.set(threeCube, { rotation: threeT * 30 });
|
||
}
|
||
|
||
// LOTTIE keyframes — two diamonds scale-pulse out of phase
|
||
const lottieT = t - 0.5;
|
||
if (lottieT > 0) {
|
||
gsap.set(lottieKfA, { scale: 1 + Math.sin(lottieT * 2.8) * 0.12 });
|
||
gsap.set(lottieKfB, { scale: 1 + Math.sin(lottieT * 2.8 + 1.6) * 0.12 });
|
||
}
|
||
|
||
// ====== ENHANCEMENT: per-icon tile glow pulse ======
|
||
// The tile's violet halo breathes throughout the orbit;
|
||
// each icon is phased by its index so the ring shimmers
|
||
// rather than pulses in unison. Only while the icons are
|
||
// still on screen (before they finish collapsing).
|
||
// Colors mirror scene-05: COLORS.brand.purple (#8b5cf6) +
|
||
// a softer rgba violet halo.
|
||
if (t < DEMO_AT) {
|
||
ICONS.forEach(({ sel }, i) => {
|
||
const glow = 32 + Math.sin(t * 1.3 + i * 0.95) * 16;
|
||
gsap.set(`${sel} .icon-tile`, {
|
||
boxShadow:
|
||
"0 15px 40px rgba(0, 0, 0, 0.35), " +
|
||
"0 0 " +
|
||
glow +
|
||
"px rgba(139, 92, 246, 0.65), " +
|
||
"0 0 " +
|
||
glow * 2 +
|
||
"px rgba(124, 58, 237, 0.28), " +
|
||
"inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
||
});
|
||
});
|
||
}
|
||
|
||
// ====== ENHANCEMENT: CTA idle breathing (pre-click) ======
|
||
// Soft violet aura pulses around the CTA card to invite
|
||
// the click. Frozen at click time; the CTA fades out at
|
||
// DEMO_AT - 0.05 so the static end-state never shows.
|
||
if (t < CLICK_AT) {
|
||
const ctaGlow = 70 + Math.sin(t * 2.6) * 30;
|
||
gsap.set(".cta", {
|
||
boxShadow:
|
||
"0 40px 80px rgba(0, 0, 0, 0.5), " +
|
||
"0 0 " +
|
||
ctaGlow +
|
||
"px rgba(139, 92, 246, 0.7), " +
|
||
"0 0 " +
|
||
ctaGlow * 2 +
|
||
"px rgba(124, 58, 237, 0.32), " +
|
||
"inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
||
});
|
||
}
|
||
|
||
// ====== ENHANCEMENT: demo glow pulse (post-emerge) ======
|
||
// Once the demo card has sprung out, its violet aura
|
||
// breathes in time with its yoyo float, giving the
|
||
// "result" element a living idle state.
|
||
if (t > DEMO_AT) {
|
||
const demoT = t - DEMO_AT;
|
||
const demoGlow = 90 + Math.sin(demoT * 1.9) * 36;
|
||
gsap.set(".demo", {
|
||
boxShadow:
|
||
"0 50px 100px rgba(0, 0, 0, 0.5), " +
|
||
"0 0 " +
|
||
demoGlow +
|
||
"px rgba(139, 92, 246, 0.7), " +
|
||
"0 0 " +
|
||
demoGlow +
|
||
"px rgba(124, 58, 237, 0.42), " +
|
||
"inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
||
});
|
||
}
|
||
},
|
||
},
|
||
0,
|
||
);
|
||
|
||
window.__timelines["main"] = tl;
|
||
</script>
|
||
</body>
|
||
</html>
|