Catalog
Browse every hyperbit. Each bit is a self-contained HyperFrames composition: HTML, CSS, a paused GSAP timeline, and optional data-composition-variables.
Colorful conic gradient rotation
Smooth transition between linear gradients
Smooth transition between radial gradients
Promotional showcase for the hyperbits catalog of HyperFrames animation bits.
An asymmetric Bauhaus poster whose circle, half-disc, bars and triangle trade places in four eased beats
A frame-wide relief of softly lifted contour terraces, the low hills reshaping slowly as the layers breathe
A gently tilted plane of dots filling the frame, slow ripples from three points lifting it in soft waves
Stacked dotted tubes seen from the side, their rings slowly turning into helix stripes across the whole frame
Garlands of soft paper cutouts hanging from the top edge across the whole width, swaying gently on their threads
Wide orbital arcs around a sun far beyond the frame, small planets gliding along them in whole-number periods
A square halftone screen where soft clouds of larger dots drift in small slow circles across the whole frame
Muted wireframe ridgelines filling the frame and rolling slowly toward a high, distant horizon
A wallpaper of small phyllotaxis flower heads whose petals open and close in a slow wave travelling across the frame
A meadow of small paper pinwheels in receding rows filling the frame, turning slowly as soft gusts roll through
Slanting pixel rain that lands and splashes at different depths across the whole frame
Soft retro sunburst wedges fanning from far below the frame, turning slowly under faint rings rippling outward
Soft long-exposure light trails looping slowly in their own patch of the frame, spread evenly with no bright heads
Gently curving bands of Truchet arcs across the frame, from a centre far off the corner, neighbouring bands gliding slowly in opposite directions
Muted striped ribbons laid diagonally across the whole frame, each slowly twisting so its back face shows
Hexagon outlines in three depth layers circling slowly in place with parallax, turning a sixth per loop
Wandering particles with glow effect simulating fireflies
Bursting fountain particles effect
Particles snapping to a grid
Falling snow particles effect
Four columns of images scrolling with different speeds in a panning 3D scene
3D camera transitions between positioned steps, impress.js style
3D Scene allows placing arbitrary elements in 3D space
Rotating carousel of cards in 3D space
Navigate through faces of a 3D Cube using Scene3D steps
Camera flies over an app screenshot while a cursor highlights different areas
Words spawning and flying past the camera
Slow camera movement over images using Scene3D steps
Demonstrates useMotionTiming context awareness in Scene3D Steps
A 3D scene with multiple terminal windows executing commands.
Demonstrates chainable Transform3D API with matrix-based interpolation, relative transforms, and smooth quaternion rotations
A stack of cards that spreads out in 3D space.
Messaging-app style conversation with bubbles arriving one after another.
Visualizes different easing functions with sliding squares.
Grid of tiles shatters into 3D space and reassembles with abstract symbol accents
A grid of elements staggering in from the center using scale and opacity.
A vertical list of items scaling and finding their place.
Broadcast-style name and title card that slides in, holds, and slides out.
Twelve image tiles transition from a grid to a feature mosaic, then into a diagonal cascade
Text that slides in from the left with fade-in effect
Elements fading in sequentially
Horizontal bar chart growing in with staggered bars and counting values.
Syntax highlighted code with line-by-line reveal
Animated counter interpolating between numbers.
Simple typing animation with cursor.
Text that fades, unblurs and slides up word by word
Text that appears character by character with staggered timing
Simulates a command-line interface with user typing and system output.
Counter reaching 1000 with confetti particles bursting from the sides.
Simple fade-in text animation from transparent to opaque
Cycling text with glitch transition effects between words
Text effect that glitches into existence from random characters
Digital rain animation inspired by The Matrix
Typing multiple sentences in sequence with deleting phase.
Circular progress rings filling up with percentage counters in the center.
Syntax highlighted code with typing effect
Advanced typewriter with variable speed curves and error simulation.
Animated text that appears word by word with staggered timing