Apex
Apex Cinema Kit
Library V1 / extracted from AGENT-B-cinematic
27 components live

This is what we’re working with. In plain sight.

Every component below is extracted from the only file you said works. They’re playing LIVE right now, not GIFs, not screenshots. Scroll through and tell me which ones make the cut, which need variants, and what’s missing. This is your vocabulary.

Source: AGENT-B-cinematic.html Brand: Cool spectrum only Tech: GSAP 3.12.5 + CSS keyframes Status: Atomic, isolated, reusable
SECTION 01 Chrome 7 layers that never move
Static
CHR-01Cosmic Backdrop

Three radial gradients on a dark base. The mood-setter. Every scene sits on top of this.

CSS onlyNo animationz-index 1
Moving
CHR-02Backdrop + Stars + Hex + Scanlines

Stars drift across 80s linear infinite. Hex grid masked to a circle. Scanlines for the CRT feel. Vignette for cinema edge fall-off.

CSS keyframesk-driftMask
Moving
Apex Operating Systems Rep Orientation
System Online
CHR-03Top Brand Bar

Persistent header with the orb favicon mini, brand name, page slug, and a live status pill with pulsing dot.

CSS pulsek-livepulsez-index 50
Static
NODE / APEX-OS-PRIMARY
SECTOR / 01
UPLINK / SECURE
150,000 / REPS IN PIPELINE
BEAT 01 / 05
23:59:42 / UNTIL ORIENTATION
CHR-04HUD Corners + Readouts

Avionics-style corner brackets in all 4 corners. Mono telemetry top-left and top-right. The control-room feel.

CSS bordersJetBrains Monoz-index 45
Static
CHR-05Chapter Rail

Right-edge dot rail tracking scroll progress through the scenes. Active dot glows, passed dots dim. Auto-labels from your scene names.

CSS transitionsJS-driven statez-index 46
Moving
LAT / 38.2916
LON / -121.0227
ALT / 0.0042 KM
SECTOR / 01
STATUS / NOMINAL
CHR-06Coordinate Readout (live)

Bottom-right telemetry that ticks LAT/LON/ALT by tiny increments every 220ms. Makes the page feel alive even when nothing else moves.

setInterval 220msLive tickerJetBrains Mono
Static
CHR-07Boot Console

Bottom-left terminal that cascades log lines on page load. Mono. Color-coded tags. The cyberpunk authority.

GSAP staggerexpo.outCSS dashed border
SECTION 02 Gravity The center of every scene
Moving
Apex
GRV-01Singularity Orb

The Apex orb at dead center. Two pre-blurred radial halos pulsing 4.6s ease-in-out infinite. Three concentric rings. SVG draw-on ring with gradient stroke. Inner disc floats 10px up/down on 6.4s. The gravity well.

CSS halopulseSVG gradientCSS floatz-index 20
SECTION 03 Beats Content that swaps inside the chrome
Moving
Apex
Apex OS / Boot Sequence 01

Hear from Apex.

Two hundred reps. One orientation. Scroll down.

BEAT-01Centered Headline (above orb)

The hero pattern. Eyebrow + headline + sub, all positioned ABOVE the orb via translateY(-110px). One word in the headline can use the gradient accent. The orb stays untouched below.

Inter Tight 600translateY -110pxAbove orb
Moving
Apex
Ignition

The seats that mattered.

BEAT-02Headline Below Orb (cycler slot)

Mirror of Beat 01, positioned BELOW the orb via translateY(+120px). Great for moments where the orb is the punctuation, not the headline. Year cycler / company swap content slots in here.

translateY +120pxBelow orbScramble-ready
Moving
Apex
1
Subscription
20+
Features
80%
Close rate
BEAT-03Stat Tiles Row

Three glass tiles with gradient numbers and mono labels. The orb scales up to make room. Counters can scrub-tick on scroll.

3 tilesScroll-tick capableBelow orb
Static
CloserDealsCash
01Alex / Sacramento240$62,000
02Jordan / Austin480$125,000
03Riley / Miami720$187,000
YOUPick your tier000$0
BEAT-04Horizontal Leaderboard

Full-width data card with rank, name+city, deals, cash. Ghost YOU row at the bottom for the rep to identify. Cash values can tick live during dwell.

Grid 4-colGhost rowLive tick
Moving
Apex
Tap to listen
BEAT-05CTA Prompt + Orb

The transmission beat. Mono "tap to listen" label sits above a gradient pill button with a pulsing dot. Orb sits at center as the listener.

Gradient pillPulse dotVoice agent hook
SECTION 04 Ambient Motion Continuous loops, never stop
Moving
AMB-01Halo Pulse

Two pre-blurred radial halos breathing on a 4.6s ease-in-out infinite loop, one direct one reverse. Pure radial-gradient, no DOM blurring. Soft glow forever.

CSS @keyframes4.6sscale 1 to 1.07
Moving
AMB-02Stars Drift

12 tiny radial-gradient stars on a 140% canvas drifting -4% / -4% over 80s linear infinite. The cosmos slowly turns.

CSS @keyframes80s linearGPU transform
Static
AMB-03Scanlines + Vignette

Repeating 1px white-with-alpha lines every 3px down the page for the CRT feel. Vignette darkens edges 45%. Both static, no CPU cost.

CSS gradientNo JSFree
Moving
LAT / 38.2916
LON / -121.0227
ALT / 0.0042 KM
SECTOR / 01
STATUS / NOMINAL
AMB-04Coord Live Tick

JS setInterval increments LAT by .0001, LON by -.0006, ALT by .0001 every 220ms. The page never feels frozen.

setInterval 220msJS micro-update
SECTION 05 Extras Supporting motion
Moving
CRM eliminatedDIALER eliminatedCOACHING eliminatedTRAINING eliminatedAGENCY eliminatedLEAD GEN eliminatedSTACK eliminated CRM eliminatedDIALER eliminatedCOACHING eliminatedTRAINING eliminatedAGENCY eliminatedLEAD GEN eliminatedSTACK eliminated
EXT-01Data Stream Ticker

Marquee of mono labels at the bottom of the stage. 26s linear infinite. Edge-masked so labels fade in and out instead of popping.

CSS marqueeMask edges26s loop
Moving
Scroll ↓
EXT-02Scroll Cue

Bottom-center mono label with a circular arrow that bounces 4px on a 1.8s ease-in-out loop. Fades out once the user starts scrolling.

CSS bounceJS fade on scroll
SECTION 06 Full Scenes All components composed together
Moving
Apex Operating Systems Rep Orientation
System Online
NODE / APEX-OS-PRIMARY
SECTOR / 01
UPLINK / SECURE
150,000 / REPS IN PIPELINE
BEAT 01 / 05
23:59:42 / UNTIL ORIENTATION
LAT / 38.2916
LON / -121.0227
ALT / 0.0042 KM
SECTOR / 01
STATUS / NOMINAL
Apex
Apex OS / Boot Sequence 01

Hear from Apex.

Two hundred reps. One orientation. Scroll down. The system is ready for you.

Scroll ↓
SCENE-01FULL SCENE: Boot Sequence (Beat 01 composed)

Every chrome layer + the orb + Beat 01 headline composed together exactly like AGENT-B-cinematic.html. This is what a single moment of the cinematic looks like. ALL 7 chrome layers visible. Orb at center. Headline above it. Scroll cue at bottom.

11 componentsLiveReference render
Moving
Apex Operating Systems Rep Orientation
Leaderboard Live
NODE / APEX-OS-PRIMARY
SECTOR / 04
UPLINK / SECURE
150,000 / REPS IN PIPELINE
BEAT 04 / 05
23:59:42 / UNTIL ORIENTATION
LAT / 38.2916
LON / -121.0227
ALT / 0.0042 KM
SECTOR / 04
STATUS / NOMINAL
Apex
A leaderboard that pays

Year one. Realistic.

CloserDealsCash
01Alex / Sacramento240$62,000
02Jordan / Austin480$125,000
03Riley / Miami720$187,000
04Sam / Phoenix1000$250,000
YOUPick your tier000$0
Friday means FridayDirect depositNo reservesNo ceilingsPay on close Friday means FridayDirect depositNo reservesNo ceilingsPay on close
SCENE-04FULL SCENE: Leaderboard (Beat 04 composed)

Orb scales down + dims back when the leaderboard takes the stage. Headline lifts higher. Data stream marquee runs at the bottom. Chapter rail shows the rep is on beat 04 of 05.

Orb scale .55Leaderboard frontMarquee bottom