Build notes

How the VideoMigrator showcase was built

This page documents the front door of VideoMigrator — a done-for-you service that moves entire video libraries off Vimeo and onto Bunny.net Stream. The showcase was designed, built, tested, and deployed in a single AI session (Claude Fable 5, 2026-07-15) from a written brief, following the Zero2Webmaster cinematic-showcase recipe first proven on the SAVE THE FROGS! Technology page.

The design story: the page itself migrates

VideoMigrator's logo gradient — purple flowing into cyan — is the story of a video library leaving an old, expensive home for a fast, affordable new one. The page enacts that story. It opens dark and heavy (deep-purple space, the old home), everything on screen drifts left to right, and midway through the scroll a white "sheet" slides over the dark — the new home, light and fast — before closing on the brand-gradient call to action.

Signature techniques

• WebGL migration-flow shader. A raw fragment shader on a fullscreen triangle: purple dusk on the left bank blends into cyan dawn on the right, horizontally-stretched fbm noise streams advect rightward, and a hash-grid of motes drifts with them. A smoothed cursor uniform adds a ripple on fine pointers; on touch devices the ripple parks far offscreen. CSS gradient fallback if WebGL is unavailable.
• The particle morph. ~3,800 canvas particles sample a gradient-filled play-button glyph (drawn in code, no emoji — platform-safe) and reassemble as the two-tone wordmark: "Video" in purple particles, "Migrator" in cyan, colors RGB-sampled from the offscreen canvas. The morph is pinned under a GSAP ScrollTrigger scrub, fully formed by ~88% of the pin, with a rightward "migration drift" mid-flight and a wobble that settles as the type lands.
• The honest savings estimator. The primary CTA. Three sliders and an editable Vimeo bill drive the same cost model as VideoMigrator's real migration engine — published Vimeo and Bunny.net Stream pricing with a conservative viewing-bandwidth estimate. It has an honest negative path: small libraries are told Vimeo may already be competitive. Slider thumbs recolor from purple to cyan as their values grow — the migration, in a micro-interaction.
• Measured, not promised. The "Fast everywhere" card reports how long this very page took to reach you, from the Navigation Timing API — a real per-visit number, not marketing copy. The same ethos as the product's SSIM ≥ 0.965 quality floor.
• Craft layer. Word-by-word hero rise, scrub-driven manifesto reveal, brand-gradient scroll-progress hairline, film-grain overlay, custom cursor with magnetic CTAs, pointer-spotlight + 3D-tilt step cards, and scroll-choreographed background color shifts between the dark sections.

The non-negotiables

• Big readable text — body copy runs 20–26px, leads to 32px, the hero to ~120px. A standing Zero2Webmaster organization rule.
• Two-tier accents for accessibility. The bright brand cyan (#16C6D9) is only used on dark ground, where it reads at 9.5:1. On the light sections, links and labels use a darkened cyan ink (#0E7490, 5.4:1 on white). Every text/background pair on the page was audited to WCAG AA.
• Reduced motion respected. The shader renders one static frame, the morph swaps to a static fallback, the marquee stops, and all copy is immediately visible.
• Content visible without JavaScript. Animations use gsap.from(), so a failed script still leaves a complete page; the estimator carries a no-script path to videomigrator.com.

Honesty constraints

Every claim on the page comes from the product brief or the migration engine itself: the ~60% size reduction at an SSIM floor of 0.965, Whisper transcription and smart chapters, read-only analysis, records in the customer's own database. No testimonials were invented, no prices published beyond the engine's published-pricing cost model, and the estimator tells small libraries the truth.

Verification

Three screenshot-critique passes at desktop (1440×900) and mobile (390×844) widths across ~9 scroll depths each, plus programmatic audits: zero console errors, one h1, no horizontal overflow, every text role's computed size at or above the 20px body floor, AA contrast on both grounds, the reduced-motion render, and the estimator's math spot-checked against the engine's calculate_savings.py across the standard, break-even, and Vimeo-wins paths.

Built by Dr. Kerry Kriger's Zero2Webmaster AI engineering practice. The showcase lives at static-sites-2e5.pages.dev/videomigrator/ and is destined for videomigrator.com.