Subframe

Subframe Motion Library

Really good motion design.

Open-source React animations, Motion components, and WebGL shaders available over MCP. No account required.

309 examples

Thumbnail index

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

Inside the lens

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

Step sequencer

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

Arc gallery

Drag the plates or use the previous and next controls.

Tidal aperture

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

Parallax plates

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

Fluid tab rail

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

Reed field

Brush across the reeds or change the wind strength

Sonic orb

Select Idle, Listen or Speak, then adjust energy.

Proposal ledger

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

Tethered type

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

Turn relay

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

Guided inspection

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

Poster corner pin

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

Sticker gravity

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

Region splice

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

Cue sheet

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

Ribbon gallery

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

Folded contact sheet

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

Chart range brush

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

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.

Incremental list

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

Field console

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

Metal emblem

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

World clock orbit

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

Queue reorder

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

A budget that stays balanced

Drag an allocation or use its arrow keys. Lock a line to preserve it while other amounts redistribute; Escape cancels the whole drag.

Into color

Add a study, then remove it. Existing artworks change rows while keeping their identities and proportions.

Borrowed shadow

Drag the suspended cutout. Arrow keys move it; Home returns it to its starting position.

Make room in the session

Drag a block to move it or either edge to resize. Focus a block or edge and use arrow keys in five-minute steps; Escape cancels the drag.

Behind the shutter

Advance the architectural study. Another press queues one extra crossing; pause freezes the current frame.

After the rain

Drag to wet the stone. Arrow keys place the brush and Space or Enter paints; Dry surface clears it.

Give the note its shape

Drag envelope nodes, then hold the play key to hear the result. Arrows adjust times; up/down on the decay node changes sustain. Releasing the key starts the release ramp.

Print proof

Drag either image to move both views. Zoom with the buttons, double-click a view, or use arrow keys, plus, minus and Home. Escape cancels an active drag.

Through the kiln

Drag vertically or move the Section slider to inspect a different cut depth.

Keep the pair readable

Choose a surface swatch or open the color well. Lock contrast to recompute ink; unlock it to keep the ink fixed as the surface changes.

Causal cadence

Choose Departure or Arrival to start a sequence, then replay or pause it. Compare the displayed cue times.

Liquid bridge

Drag horizontally or adjust Separation to join and part the drops.

One exact viewpoint

Drag the planes or use the Viewpoint range, then press Align to reach the registration point.

Highlight headroom

Drag horizontally or move Exposure from −2 to +2 EV; compare the roll-off region with the clipping sliver.

Patch the signal

Drag an output socket to an input, or select both with keyboard or touch. Listen opts into audio; connection chips remove cables.

Score follow

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

Wrap a mark

Drag directly on the canister, use arrow keys to place the mark, and turn the vessel to inspect its side.

Dock, detach, return

Drag the title to an allowed edge, use the dock buttons, or move with arrow keys. Detach restores the prior floating position.

Stereo field

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

Slit scan

Change time spread or pause the scan.

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.

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.

Precision scrub

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

Photo lightbox

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

Folded note

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

Specimen fan

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

Spoken article

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

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.

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.

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.

Tile wave

Change warp amount, switch tile density, or pause

Microphone check

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

Viscous type

Move across the letters or press Disturb; tune pressure

Deferred feed

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

Dictation draft

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

Ink trail

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

Tempo type

Choose a pattern, start, and change BPM.

Push to talk

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

Format tooltip

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

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.

Glasshouse

Move across the specimen or adjust depth

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.

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.

Secret ingredient

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

Print lab

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

Focus lens

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

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

Voice audition

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

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