Skip to content

Catalog

Browse every hyperbit. Each bit is a self-contained HyperFrames composition: HTML, CSS, a paused GSAP timeline, and optional data-composition-variables.

46 bits
Conic Gradient

Colorful conic gradient rotation

Linear Gradient

Smooth transition between linear gradients

Radial Gradient

Smooth transition between radial gradients

Hyperbits

Promotional showcase for the hyperbits catalog of HyperFrames animation bits.

Fireflies

Wandering particles with glow effect simulating fireflies

Fountain

Bursting fountain particles effect

Grid Particles

Particles snapping to a grid

Snow

Falling snow particles effect

Scrolling Columns

Four columns of images scrolling with different speeds in a panning 3D scene

Basic 3D Scene

3D camera transitions between positioned steps, impress.js style

3D Elements

3D Scene allows placing arbitrary elements in 3D space

3D Carousel

Rotating carousel of cards in 3D space

Cube Navigation 3D

Navigate through faces of a 3D Cube using Scene3D steps

Cursor Flyover

Camera flies over an app screenshot while a cursor highlights different areas

Flying Through Words

Words spawning and flying past the camera

Ken Burns Effect

Slow camera movement over images using Scene3D steps

Step-Aware Motion Timing

Demonstrates useMotionTiming context awareness in Scene3D Steps

3D Terminal

A 3D scene with multiple terminal windows executing commands.

Transform3D Showcase

Demonstrates chainable Transform3D API with matrix-based interpolation, relative transforms, and smooth quaternion rotations

3D Card Stack

A stack of cards that spreads out in 3D space.

Chat Conversation

Messaging-app style conversation with bubbles arriving one after another.

Easings Visualizer

Visualizes different easing functions with sliding squares.

Fracture Reassemble

Grid of tiles shatters into 3D space and reassembles with abstract symbol accents

Grid Stagger

A grid of elements staggering in from the center using scale and opacity.

List Reveal

A vertical list of items scaling and finding their place.

Lower Third

Broadcast-style name and title card that slides in, holds, and slides out.

Mosaic Reframe

Twelve image tiles transition from a grid to a feature mosaic, then into a diagonal cascade

Slide from Left

Text that slides in from the left with fade-in effect

Staggered Fade In

Elements fading in sequentially

Bar Chart

Horizontal bar chart growing in with staggered bars and counting values.

Basic Code Block

Syntax highlighted code with line-by-line reveal

Basic Counter

Animated counter interpolating between numbers.

Basic Typewriter

Simple typing animation with cursor.

Blur In

Text that fades, unblurs and slides up word by word

Staggered Char Animation

Text that appears character by character with staggered timing

CLI Simulation

Simulates a command-line interface with user typing and system output.

Counter Confetti

Counter reaching 1000 with confetti particles bursting from the sides.

Fade In

Simple fade-in text animation from transparent to opaque

Glitch Cycle

Cycling text with glitch transition effects between words

Glitch In

Text effect that glitches into existence from random characters

Matrix Rain

Digital rain animation inspired by The Matrix

Multi-Text Typewriter

Typing multiple sentences in sequence with deleting phase.

Stat Rings

Circular progress rings filling up with percentage counters in the center.

Typing Code Block

Syntax highlighted code with typing effect

Variable Speed & Typos

Advanced typewriter with variable speed curves and error simulation.

Word by Word

Animated text that appears word by word with staggered timing