Subframe

Subframe Motion Library

Really good motion design.

Open-source React animations, Motion components and WebGL shaders.

288 examples

Score follow

Play, change the tempo, or drag the score to seek

Slit scan

Change time spread or pause the scan.

Proposal ledger

Accept or reject each field, undo a decision, or apply the remaining changes.

Stereo field

Adjust phase and width, inspect correlation, and pause or resume the trace.

Painter’s palette

Choose a pigment, then adjust Lightness. Arrow keys move through the two rows; Home and End jump to the first and last pigment.

Easing workbench

Drag the handles, scrub time, play the motion, or copy the CSS curve

Wake image

Move across the water and adjust the wake strength.

Region splice

Drag a region or its selected edges; use arrows, Shift, Home and End; toggle quarter-second snapping or reset.

Folded contact sheet

Drag the photographs, choose one, or use the arrows. Left, Right, Home and End navigate directly.

Ribbon gallery

Drag left across the print or select the next and previous controls.

Precision scrub

Drag the value, click to type, or use arrow keys; Shift accelerates and Alt refines

Metal emblem

Change the mark, move the light or hold it in place.

Tethered type

Drag a letter and release it, or use arrow keys and Enter

Photo lightbox

Open a photograph; browse, enlarge and drag. Arrow keys browse or pan the enlarged image.

Fluid tab rail

Hover or select a mode. Arrow keys, Home and End select immediately.

Arc gallery

Drag the plates or use the previous and next controls.

Sonic orb

Select Idle, Listen or Speak, then adjust energy.

Reed field

Brush across the reeds or change the wind strength

Guided inspection

Start the walkthrough; advance through three points or use arrow keys. Escape exits.

Tidal aperture

Scroll, drag upward, scrub the aperture slider or choose Open view.

Folded note

Enter a recipient email and note, seal the draft, then open it again; cancel while folding

Spoken article

Listen, pause, select a sentence or change the speaking rate.

Parallax plates

Drag or swipe the rail; use Previous, Next or keyboard arrows to center an image.

Thumbnail index

Choose a thumbnail. Up, Down, Home and End move the focused selection.

Specimen fan

Drag or select a specimen. Use the arrows, Left, Right, Home and End to browse.

World clock orbit

Select a city or drag the globe. Focus the globe and use arrow keys; Home returns to the selected city.

Light weave

Drag the loop or adjust Twist; pause to inspect the light.

Tactile keypad

Press C, M and R or the keycaps. Hold Shift with R to rotate backward. Enable sound explicitly if desired.

Sticker gravity

Drag and release a seal, or pause and arrange it with the keyboard.

Boolean studio

Choose Join, Cut or Intersect; drag the cutter or adjust its position.

Layered menu

Open a category, drill into a group and choose a collection.

Tilt focus

Drag the focal plane and adjust blur or tilt.

Artwork context menu

Right-click or tap an artwork, use the three-dot button, or press Shift+F10. Rotate, invert ink or duplicate; each copy remains independently editable.

Paper swarm

Move the pointer for parallax; change or reverse the flow

Engraved orbit

Drag or use arrow keys to rotate; adjust engraving pitch and toggle automatic rotation.

Address check

Edit the address, then blur or select Check address.

Tidal bitmap

Move the pointer or arrow keys; change the field mode.

Incremental list

Load the next batch, retry the first failed request, and reach the final record.

Microphone check

Enable the microphone, choose a device, then mute or disconnect.

Deferred feed

Add a preview update, keep reading, or jump to the newest entry.

Tile wave

Change warp amount, switch tile density, or pause

Dictation draft

Preview, pause and reset the incoming words, then edit the finished draft.

Viscous type

Move across the letters or press Disturb; tune pressure

Push to talk

Enable the microphone, hold to record, release to finish, then play the take.

Ink trail

Draw with a pointer, touch or arrow keys; clear to begin again

Format tooltip

Hover across the group, focus controls with Tab, or toggle formatting.

Tempo type

Choose a pattern, start, and change BPM.

Quote tick

Apply an up or down tick and compare the previous value and signed difference.

Cue scrubber

Preview a cue on hover, jump to a chapter or scrub the clock.

Branch wizard

Name the collection, choose a format and quality, review, and prepare the local preview.

Answer stream

Replay or stop the response; scroll up, then jump to the latest text.

Crop window

Drag the frame or its corners, use arrows with optional Shift, and apply the crop.

Stereo blend

Enable sound and move the equal-power blend control.

Glasshouse

Move across the specimen or adjust depth

Transfer receipt

Enter an amount, preview or cancel, and start again after completion.

Spectral selection

Drag a region, move it with arrow keys, or resize it with Shift and arrows.

Recurrence picker

Select weekdays, choose a weekly interval and toggle repeating. The 21-day strip follows the rule.

Thread reply

Write a reply, send with Enter, then resolve or reopen the thread.

Undo removal

Remove the draft, pause expiry by hover or focus, and Undo or reset after expiry.

Elastic fader

Drag the level past either endpoint, or use arrow keys.

Print lab

Choose a treatment, adjust its mix, and print a proof

Secret ingredient

Peel the foil, then press either the foil reverse or exposed seal area to reseal.

Focus lens

Move the lens, use arrow keys, or reveal the full artwork

Field console

Drag the wave field or hold arrow keys; adjust flow, spread and grain.

Waveform trim

Drag trim handles or the selection; use arrows, Shift+arrows, Home or End

Rotary tuner

Rotate the rim, drag from the center, or use arrow keys

Inside the lens

Click the camera or the Explode view control to separate or assemble the optics.

Voice audition

Select a narrator or press its play key to audition the shared phrase.

Cue sheet

Play the silent timing preview, select a word or sentence timestamp, or scrub the waveform

Turn relay

Send the prepared phrase or write your own, then interrupt a reply or send another message

Step sequencer

Toggle keys and start or pause playback; reduced-motion playback advances one step at a time.

Queue reorder

Drag a handle across rows or use Up/Down, Home and End. Escape cancels an in-progress drag.

Poster corner pin

Drag a poster corner, nudge it with arrow keys, or choose Fit to wall.

Chart range brush

Drag either minimap handle, or use arrow keys, Home/End and PageUp/PageDown. Escape cancels the drag.

Breadcrumb expansion

Expand the ellipsis, choose an ancestor, and open its child to return. Escape collapses the trail.

Night signal

Drag the filmstrip, step frames, or play the sequence

Within reach

Choose a tool, reopen the dial, or use arrow keys and Escape

Make space

Drag levels, mute channels, or isolate a solo