escazulion.com · v3 · shipped 2026-08-16

The Lion Three Hundred

Three hundred changes making escazulion.com visually pop: five Veo-generated ambient videos woven through the page, a full motion system, pointer-reactive surfaces, and the delivery engineering that keeps all of it fast, accessible, and skippable. Live now at escazulion.com · v2 record: The Lion Hundred · original: v1 archive.

300/300 shipped 5 Veo ambient videos motion adds +1.7 KB gz JS 0 new dependencies Live site ↗

Veo cinematography 1–20

Four new clips join the hero silk — five moods, one palette, all graded for text on top.

  1. 1Four new Veo clips join the v2 hero silk — five ambient videos sitewide
  2. 2"Night Watch": lion silhouette on a clifftop under the Milky Way (CTA band)
  3. 3"Emerald Rain": bokeh particles drifting upward (Services band)
  4. 4"Lightstream": fiber-optic data streaks with parallax (Process band)
  5. 5"Northern Sky": aurora curtains over a dark ridge (Quote band)
  6. 6Every prompt pins the palette, a brightness ceiling, and no-text/no-logo rules
  7. 7All clips graded very dark on purpose — type stays readable over motion
  8. 8Forward-reverse concat makes every loop seamless (no visible cut)
  9. 9All clips normalized to 24fps for a consistent motion feel
  10. 101280px x264 crf-33 transcode — band clips average ~0.9 MB
  11. 11Audio streams stripped — muted ambience, zero wasted bytes
  12. 12+faststart moov atom so playback starts instantly
  13. 13yuv420p pixel format for universal browser support
  14. 14Poster frame extracted from each clip as an optimized JPEG
  15. 15Posters double as the phone / reduced-motion experience
  16. 16Total added video weight ≈3.3 MB — lazy, desktop-only
  17. 17Raw Veo renders gitignored by pattern (scratch, not source)
  18. 18Regeneration pipeline documented in SITE.md
  19. 19The v2 hero clip retained — continuity, not churn
  20. 20Every clip visually reviewed before shipping

Video delivery engineering 21–40

One VideoBand component makes cinematic backgrounds cheap and safe.

  1. 21New reusable VideoBand component powers every video section
  2. 22Poster paints instantly under every video — no black flash
  3. 23Video mounts only when its band nears the viewport (600px margin)
  4. 24Below-fold videos use preload=none — zero bytes until needed
  5. 25Offscreen bands pause playback (battery + CPU)
  6. 26Playback resumes automatically on scroll-back
  7. 27Desktop-only gating via live media query (≥1024px)
  8. 28prefers-reduced-motion disables all ambient video
  9. 29Save-Data connection hint disables all ambient video
  10. 30Per-band video opacity tuning (0.22 services → 0.55 CTA)
  11. 31Per-band poster opacity tuned separately for static viewers
  12. 32Per-band gradient overlays keep contrast safe over any frame
  13. 33Videos are aria-hidden and unfocusable — pure decoration
  14. 34Muted + playsinline autoplay (iOS-safe, silent by construction)
  15. 35play() rejections swallowed gracefully (autoplay policies)
  16. 36Aurora band gets the heaviest overlay — brightest clip, tamed
  17. 37CTA lion band gets the lightest overlay — the clip is the hero there
  18. 38Film-grain overlay unifies all media bands
  19. 39content-visibility skips offscreen band rendering
  20. 40Hero keeps eager metadata preload — first paint unaffected

Hero upgrades 41–60

The first screen now moves — carefully.

  1. 41Headline keyword runs an animated aurora gradient
  2. 42Dashboard balance ticks upward every ~4s like a live ledger
  3. 43Ticker respects reduced motion (static figure)
  4. 44Second sparkline series (sky-blue, dashed) joins the emerald line
  5. 45Both sparklines draw themselves in with staggered delays
  6. 46"Client portal · live" gains a pulsing live dot
  7. 47Dashboard digits set in tabular-nums (no jitter while ticking)
  8. 48Availability badge kept, pulse dot preserved
  9. 49Primary CTA: glow halo + shine sweep on hover
  10. 50Secondary CTA backdrop-blurs over the moving video
  11. 51Film grain over the hero band
  12. 52Hero overlay gradient retuned for the animated backdrop
  13. 53Poster fallback opacity tuned for phones
  14. 54fetchpriority=high stays on the logo (LCP guard)
  15. 55Headline in Sora at 6xl with tight tracking
  16. 56text-balance keeps the headline ragless at every width
  17. 57No copy churn — motion added without rewriting the pitch
  18. 58Hero grid integrity preserved down to 320px
  19. 59Dashboard glow ring layered beneath the grain
  20. 60Transaction amounts in tabular-nums

Motion system 61–80

Choreography, not chaos: variants, stagger, and one kill switch.

  1. 61Reveal system rebuilt with four variants: up, left, right, scale
  2. 62Per-card stagger delays (80–120ms steps)
  3. 63Stats strip reveals in sequence
  4. 64About era cards enter from left / center / right
  5. 65Principles cards scale in
  6. 66Case-study phases cascade
  7. 67Process steps stagger
  8. 68Engagement models stagger
  9. 69Contact columns slide in from opposite sides
  10. 70Quote band scales in
  11. 71IO threshold tuned to 12% — reveals feel early, never late
  12. 72Reveals fire once and disconnect (no scroll jank)
  13. 73Reduced motion sees all content instantly — nothing stays hidden
  14. 74Count-ups ease with cubic ease-out
  15. 75Count-ups skip year-like values (Since 2001 stays put)
  16. 76Count-ups trigger at 50% visibility
  17. 77Sparkline draw-in uses pathLength normalization
  18. 78Scroll progress bar under the header, rAF-throttled
  19. 79Progress bar is presentation-only (aria-hidden)
  20. 80Every new animation obeys the global reduced-motion switch

Pointer & hover craft 81–100

Surfaces that answer the cursor.

  1. 81TiltCards across services, eras, principles, process, and models
  2. 82Tilt capped at 5° — premium, not seasick
  3. 83A radial emerald glow follows the pointer inside each card
  4. 84Tilt engages only on fine pointers with hover — never touch
  5. 85Tilt disabled under reduced motion
  6. 86Tilt resets smoothly on pointer leave
  7. 87Card transforms GPU-composited (will-change)
  8. 88Nav links grow an animated origin-left underline
  9. 89The active section keeps its underline pinned
  10. 90Logo breathes a soft glow ring on a 4.5s cycle
  11. 91Logo scales 5% on hover
  12. 92Service icons scale on card hover
  13. 93Industry chips brighten on hover
  14. 94Stack pills brighten with an emerald border on hover
  15. 95All primary buttons share the glow treatment
  16. 96Shine sweep runs once per hover — no strobing
  17. 97Carousel arrows enlarged to 44px targets
  18. 98Footer links transition color on hover
  19. 99FAQ "+" rotates to "×" when open
  20. 100Focus states mirror hover states across the system

Typography & texture 101–120

The quiet layer that makes the loud layer work.

  1. 101Aurora gradient runs across brand keywords in hero and quote
  2. 102Four-stop emerald→sky→green→emerald gradient loop
  3. 1037s linear animation — subliminal, not flashy
  4. 104Static mid-gradient under reduced motion
  5. 105Film grain is inline SVG turbulence — zero extra requests
  6. 106Grain restricted to media bands, never cards or forms
  7. 107Themed scrollbar: navy track, emerald hover thumb
  8. 108tabular-nums on every data numeral
  9. 109Sora reaches all headings via the font-heading token
  10. 110Quote band pull-quote set in Sora 3xl
  11. 111Footer wordmark in Sora
  12. 112Form character counter in tabular-nums
  13. 113Selection color stays brand emerald
  14. 114text-balance on every section heading
  15. 115Body copy width capped for readability
  16. 116Eyebrow labels keep their widest tracking
  17. 117Card titles unified at lg / semibold
  18. 118v2's muted-text contrast audit carried forward intact
  19. 119Backdrop-blur keeps type crisp over moving video
  20. 120Print styles still strip every motion and video layer

Sections & layout 121–140

A new band, a new rhythm.

  1. 121New Quote band (aurora) between Stack and FAQ
  2. 122Band rhythm alternates plain → video → plain down the page
  3. 123CTA band swaps static art for the Night Watch lion clip
  4. 124CTA padding grown to py-32 — cinematic breathing room
  5. 125Services carousel now floats over the bokeh clip
  6. 126Process steps float over the lightstream clip
  7. 127About keeps its Grok texture still — contrast with the video bands
  8. 128Case-study card gains a blurred gradient halo border
  9. 129Process steps became a semantic ordered list
  10. 130Guarantees strip backdrop-blurs over video
  11. 131Stack section goes full-bleed for the marquee
  12. 132Marquee: infinitely scrolling stack pills on a 36s loop
  13. 133Marquee pauses on hover and on keyboard focus
  14. 134Marquee edges fade out via CSS mask
  15. 135Marquee duplicates aria-hidden — screen readers hear each tech once
  16. 136Reduced motion: marquee becomes wrapped static pills
  17. 137Footer gains the v3 changelog link
  18. 138Footer keeps the v2 changelog link — history preserved
  19. 139Footer version line reads v3 with the build date
  20. 140Section scroll-margins stay aligned with the fixed header

Services & carousel 141–160

The carousel kept its brain and got new skin.

  1. 141Carousel logic preserved from the parallel session — relocated, not rewritten
  2. 142Tilt and track transforms layered without conflict (inner vs outer)
  3. 143Cards backdrop-blur over the video
  4. 144Card hover keeps the emerald border highlight
  5. 145Auto-advance stays at 4.5s
  6. 146Hover pauses auto-advance
  7. 147Touch pauses auto-advance
  8. 148Keyboard focus pauses auto-advance
  9. 149Reduced motion disables auto-advance entirely
  10. 150Responsive visible count: 1 / 2 / 3 cards
  11. 151Index clamps on breakpoint change — no blank slides
  12. 152Arrows wrap around at both ends
  13. 153Dot indicators show position
  14. 154The active dot stretches for visibility
  15. 155Arrows carry aria-labels
  16. 156Dots carry per-slide aria-labels
  17. 157Arrow buttons meet 44px targets
  18. 158Icon chips scale on hover
  19. 159Service copy untouched — zero copy churn this round
  20. 160Overlay keeps the video from ever catching pointer events

Dashboard mockup 161–180

The fake portal now behaves like a real one.

  1. 161LiveAmount: the balance ticks upward like a live ledger
  2. 162Tick cadence randomized ($20–$400 every ~3.8s)
  3. 163Locale-formatted with fixed decimals
  4. 164Reduced motion shows a static balance
  5. 165Pulsing live dot beside "Client portal"
  6. 166A second data series tells a richer chart story
  7. 167Secondary series dashed at 50% opacity — clear hierarchy
  8. 168Both series draw in with staggered delays
  9. 169Gradient area fill kept under the primary line
  10. 17099.99% uptime chip unchanged
  11. 171Transaction rows keep their divide borders
  12. 172Amounts colored by direction (emerald in, muted out)
  13. 173All numbers tabular
  14. 174Card floats on a blurred gradient glow
  15. 175Card backdrop-blurs over the hero video
  16. 176shadow-2xl depth on the card
  17. 177Mockup hidden below lg — phones never pay for it
  18. 178All SVG chart internals aria-hidden
  19. 179Chart gradients use oklch brand tokens
  20. 180Still pure CSS/SVG — no chart library added

Nav, header & footer 181–200

Chrome that reacts to where you are.

  1. 181Header background deepens after 24px of scroll
  2. 182Header border tints emerald when scrolled
  3. 183Scroll progress bar spans the viewport under the header
  4. 184Progress gradient matches the brand (emerald→sky)
  5. 185Progress updates via requestAnimationFrame
  6. 186Nav underlines animate in from the left
  7. 187aria-current marks the active section
  8. 188Active-section detection via weighted IntersectionObserver
  9. 189Mobile menu behavior preserved through the refactor (Escape, aria-expanded)
  10. 190Header CTA gets the glow treatment
  11. 191Logo glow ring breathes
  12. 192Header height stable — no layout shift between scroll states
  13. 193Footer grid intact through the refactor
  14. 194Footer adds the Lion Three Hundred link
  15. 195Sitemap gains both changelog pages
  16. 196Back-to-top appears after 600px
  17. 197Back-to-top jumps instantly under reduced motion
  18. 198Skip link preserved, first in the DOM
  19. 199Fixed elements follow one z-index scale (progress > header > scroll-top)
  20. 200Print hides header, progress bar, and scroll-top

Accessibility of motion 201–220

All of it optional, none of it meaningful-only.

  1. 201Every animation source checks prefers-reduced-motion — one switch stops everything
  2. 202Ambient video never traps focus (tabindex −1)
  3. 203Videos aria-hidden throughout
  4. 204Posters are decorative backgrounds, not content images
  5. 205Motion never carries meaning — all information exists as text
  6. 206Marquee duplicates hidden from assistive tech
  7. 207Progress bar aria-hidden
  8. 208The live ticker is decorative; real claims stay static in copy
  9. 209Glow and shine are pure CSS — no JS timers beyond the ticker
  10. 210Focus-visible rings on every interactive element
  11. 211FAQ stays native details/summary
  12. 212Underlined nav passes contrast on the navy ground
  13. 213Overlay gradients keep text readable over any video frame
  14. 214Tap targets stay ≥44px through the redesign
  15. 215No audio anywhere — every clip muted and stream-stripped
  16. 216No flashing content — slow fades only, far under seizure thresholds
  17. 217Carousel focus-pause aids switch and keyboard users
  18. 218Scroll reveals enter at gentle 16px offsets
  19. 219Landmarks unchanged: header, main, labeled navs, footer
  20. 220Heading order preserved — a single h1

Performance engineering 221–240

The pop costs almost nothing.

  1. 221JS bundle 75.5 KB gz — the whole motion system cost +1.7 KB
  2. 222CSS 10.9 KB gz
  3. 223Video bytes ship only to ≥1024px viewports
  4. 224Below-fold video defers until 600px away
  5. 225Offscreen pause cuts decode and CPU
  6. 226IntersectionObservers everywhere — no scroll polling for reveals
  7. 227Remaining scroll listeners are passive and rAF-batched
  8. 228Tilt writes CSS variables only — zero re-renders per pointer move
  9. 229React re-renders limited to ticker, carousel index, header state
  10. 230Marquee animates on the compositor thread (pure CSS)
  11. 231Grain is an inline data URI — no request
  12. 232content-visibility on all below-fold bands
  13. 233Posters tuned to 16–130 KB
  14. 234Posters load as CSS backgrounds — never preloaded upfront
  15. 235Caddy's 7-day media cache covers every new asset
  16. 236Immutable hashed caching still covers JS/CSS
  17. 237Zero new npm dependencies
  18. 238Font subsets unchanged — no added weights
  19. 239Production build still ~0.6s
  20. 240version.txt stamps every deploy

Code architecture 241–260

v3 is easier to change than v2 was.

  1. 241App.tsx reduced to a 40-line assembly
  2. 242All copy extracted to src/content.ts — edit text without touching layout
  3. 243Effects consolidated in src/lib/fx.tsx
  4. 244VideoBand isolated in src/components/VideoBand.tsx
  5. 245Sections split into Header, Hero, Services, Bands, Closing, shared
  6. 246SectionHeading extracted to a single definition
  7. 247Icon imports centralized with the content
  8. 248Reveal, TiltCard, CountUp exported as reusable primitives
  9. 249useAmbientOK: one gating policy for all five videos
  10. 250useActiveSection shared by nav (one observer set)
  11. 251tsc -b clean — fully typed
  12. 252Oxlint clean (only pre-existing fast-refresh notices)
  13. 253No dead code left from the v2 monolith
  14. 254__BUILD_DATE__ defined once at build
  15. 255Media naming convention: veo-<band>.mp4 + veo-<band>-poster.jpg
  16. 256Content arrays typed by inference — no any
  17. 257fx utilities documented with intent comments
  18. 258VideoBand fully prop-driven (opacities, overlay, eager)
  19. 259Carousel reviewed line-by-line during relocation
  20. 260Still dependency-free — no framer-motion needed for any of it

Ops & media pipeline 261–280

Repeatable, verified, reversible.

  1. 261One ffmpeg pipeline (loop → compress → poster) for every clip
  2. 262Pipeline documented in SITE.md
  3. 263Raw renders gitignored by pattern
  4. 264Smoke test grows to 17 checks
  5. 265New check: the CTA lion clip is reachable
  6. 266New check: a Veo poster is reachable
  7. 267New check: the v3 changelog page serves
  8. 268Deploy script reused unchanged — build, swap, verify
  9. 269Rollback still one line (dist.old kept warm)
  10. 270v1 archive untouched — frozen for good
  11. 271/lion-three-hundred.html ships from public/ (survives deploys)
  12. 272Sitemap includes both changelogs
  13. 273Clips and posters ship in one atomic deploy
  14. 274Caddy untouched this round — zero server risk
  15. 275contact-api untouched this round — stable surface
  16. 276v3 lands as reviewable commits
  17. 277Repo mirrored to GitHub on every commit
  18. 278Deployed mid-build so progress was visible live
  19. 279Full-page headless-Chrome verification at 1440px
  20. 280Bottom-of-page crop verified the footer to the pixel

Docs, QA & delivery 281–300

Shipped, checked, and written down.

  1. 281NEXT-300.md pointer in the repo
  2. 282This page live on the site
  3. 283Footer links both changelogs
  4. 284SITE.md updated for the v3 architecture
  5. 285CLAUDE.md updated for future sessions
  6. 286The Lion Hundred page untouched — the v2 record stands
  7. 287Live ticker starts at v2's static figure — continuity
  8. 288No new marketing claims invented this round
  9. 289AI credits maintained in humans.txt
  10. 290Before/after screenshots archived from the session
  11. 29117/17 smoke checks green on the final deploy
  12. 292Homepage HTML still under 30 KB
  13. 293og-banner untouched — link previews stay stable
  14. 294Favicon untouched — tab identity stays stable
  15. 295JSON-LD untouched — SEO stable through the redesign
  16. 296Privacy claims still exactly accurate — no tracking added
  17. 297CSP unchanged — every new asset is first-party
  18. 298Still zero cookies
  19. 299The whole v2→v3 diff reviewable in one commit set
  20. 300This list