Case Study
Hero Animation Builder
Design a hero animation, watch it ship itself
An interactive builder for SVG arc animations: tune the line, five independent glow layers, an entrance draw, and continuous breathing motion through 36 live controls, then see the design rendered on a fictional fintech marketing site. The whole configuration encodes into the URL, so every design is instantly shareable. Hand-built animation system, six runtime dependencies, no animation library.
Overview
A two-sided piece: a builder and a stage. The builder exposes the full anatomy of a hero arc animation (line thickness and brightness falloff, five named glow layers from Upper Far to Lower Far each with its own color, width, blur, opacity, and offset, a choreographed entrance draw, and a breathing loop) with five tuned presets and a randomizer. The stage is /live, a deliberately fictional fintech brand whose hero, feature grid, and CTA are all lit by whatever the user designed: the config travels as base64 JSON in the URL and is decoded during server-side rendering, no storage anywhere. Two craft decisions do the heavy lifting. The arc is imperatively built SVG, constructed once with attribute-only updates afterward, which is why 36 controls feel instant. And color legibility is guaranteed by an inline implementation of APCA-W3 (the SA98G algorithm): it picks button text color against any user accent and progressively lightens accent-colored text until it clears perceptual contrast thresholds, solving the saturated-hue-on-dark-UI problem that WCAG 2.x luminance math gets wrong.
Key Features
- 01Imperatively built SVG arc: constructed once, then attribute-only updates, so every slider responds instantly with no re-render of the graphic
- 02Inline APCA-W3 (SA98G) contrast engine: picks button text color for any accent and lightens accent text in 5% steps until perceptual legibility thresholds pass
- 03Every design is a URL: the full config encodes as base64 JSON into a query param and decodes during SSR on the staged site, no storage, instantly shareable
- 04Five independent glow layers (Upper Far, Upper Near, Inner, Lower Near, Lower Far), each with its own color, width, blur, opacity, and vertical offset
- 05Choreographed motion: a timed entrance draw with staged glow fade-in, then a continuous breathing loop with speed, intensity, and drift controls
- 06CSS-3D showcase card driven by a hand-written requestAnimationFrame lerp loop, perspective and preserve-3d only, no Three.js
- 07A deliberately fictional fintech brand stages the work: the user's design lights the hero, the ambient card lighting, and the closing CTA
- 08Six runtime dependencies total; the animation system, the contrast engine, and the 3D interaction are all hand-built