Playground tour
An annotated tour of HyperFrames' 33 community playground examples, grouped by use case, each with a one-click open button.
A guided walk through every example in the HyperFrames playground. Each one is a self-contained HTML document — open it, fork it, ship it. Use this page as a menu: find the technique closest to what you want, then make it yours.
What you'll learn
- Which example to start from for a given output (lower-third, chart, social cut)
- The handful of patterns that recur across categories
- Where to find the standout demos worth studying line-by-line
Kinetic type
The fastest way to feel HyperFrames' frame-pinned timing is to animate letters.
- typewriter-reveal — character-by-character reveal driven by
animation-delay. - masked-word-swap — words cycle in and out behind a mask.
- split-char-bounce — per-character spring bounce; great for titles.
- editorial-pull-quote — magazine-style oversized quotation with rule lines.
- animated-number-counter — counts to a target value with easing.
Data visualization
Charts that animate in are five lines of CSS away from a finished asset.
- live-bar-chart — animated bars driven by
widthtransitions. - sparkline-ticker — inline SVG path with a stroke-dash reveal.
- dial-gauge — speedometer with a rotating needle.
- kpi-card-pop — three KPI cards staggering in.
- bar-spectrum-fft — animated audio-style spectrum bars.
- weather-card — animated weather widget with an icon transition.
Transitions
If you ever need to cut from A to B, start here.
- wipe-bright — luminance-keyed wipe between two scenes.
- wipe-clip-path — animated
clip-pathreveal. - melt-pixelate — staggered grid that dissolves.
- prism-shatter — CSS-only shatter into colored shards.
VFX & shaders
Pure CSS, no GPU shader code. Determinism stays intact.
- neon-pulse — glowing text with offset shadow stacks.
- conic-shader — animated
conic-gradientfor a swirling background. - parallax-stars — layered star fields drifting at different speeds.
- liquid-blob — SVG
feGaussianBlur+feColorMatrixgooey effect. - confetti-burst — particle burst from a central origin.
- globe-arcs — SVG arcs sweeping across a stylized globe.
Cinematic
Longer, slower compositions tuned for "looks like a real edit."
- sunset-cinematic — gradient sky with a slow camera-style push.
- wes-anderson-card — symmetric pastel composition with serif type.
- logo-reveal-pop — single-shot logo sting.
- youtube-intro-16x9 — five-second intro template.
Broadcast & social
Templates sized for the platforms you actually ship to.
- lower-third-news — name plate + ticker.
- end-card-install — app-install end card with CTA.
- tiktok-9x16 — vertical layout for TikTok / Reels / Shorts.
- instagram-square — 1:1 square layout.
- countdown-timer — counts down to zero, frame-accurate.
- csv-personalized-card — template that renders one card per CSV row.
- og-image-animated — animated frame intended as a still OG image.
- podcast-cover-3000 — animated podcast cover, 3000×3000.
Reference
One example is not a template — it's a cheat sheet.
- easing-cheatsheet — every named easing curve visualized side-by-side. Bookmark it.
How to use this list
- Find the example closest to your goal.
- Click Open to load it in the playground.
- Hit "Fork" and replace the copy, colors, and timing.
- Download the HTML, drop it in your repo, render with
hyperframes render.