baseframekineticsMake something move ↗

A small studio for movement on the web

Good websites
move with
purpose.

A little anticipation. A softer landing. Motion that makes an interface feel right—without a new dependency.

Find your motion ↗

Pure CSS. Editable code. Yours to make your own.

THE MOTION STUDYBF—001
+
+
Less friction.
More feeling.
Built for real interfacesNo animation library requiredReduced-motion fallbacks included

The free playground

Feel it. Tweak it. Ship it.

Pick a movement, set its pace, and copy the CSS.
No account. No email gate.

Animation plays on request. Your system’s reduced-motion setting always takes priority.

LIVE PREVIEW
↗Right on cue.A little movement. A better moment.
Made with CSS. Nothing else.
YOUR CSS

The first collection

Your next website.
Already in motion.

The Interface Motion Kit brings together 18 editable CSS patterns, a working demo gallery, and a practical integration guide.

  • Entrances, hover states, feedback, and transitions
  • Plain HTML + CSS. Use with your preferred stack.
  • Commercial use in your own and client websites
  • Reduced-motion overrides in every pattern
Explore what’s inside ↗
INTERFACE MOTION KIT · V1

$29USD · one-time

Source files you own and can edit.
No subscription. No build step.

The paid kit is being prepared for release. Try the free sample today.

Download the free sample ↓

Field notes

Make motion earn its place.

Read all notes ↗
CRAFT · TIMING

How to choose a CSS animation duration

Start with the task, then tune the pace.

Read the note ↗ACCESSIBILITY · DEFAULTS

A better reduced-motion fallback

Keep the meaning. Simplify the movement.

Read the note ↗ENGINEERING · CHOICES

When CSS is enough for interface motion

Use the smallest tool that does the job.

Read the note ↗