Get started
All interface styles
Treatment
Pro

Kinetic / Experimental

Motion as a primary design element: type and surfaces that move, respond and transform, with a complete static presentation underneath.

Also called: kinetic typography, motion-led, experimental, scroll-driven

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Kinetic / Experimental changes

Surface material, borders, shape, depth, component layout, states, and motion.

Kinetic / Experimental specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Kinetic / Experimental applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: Toggle reduced motion and compare: the static presentation carries every piece of information the animated one does. Selection and focus are marked statically, so nothing depends on movement having played.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Kinetic / Experimental to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • Type that animates in, marquees, or reacts to the pointer
  • Elements that transform on scroll rather than merely appearing
  • Transitions that carry meaning — where something came from and went
  • Hover states that deform, stretch or magnetise
  • A composition that reads as choreographed rather than laid out

Best for

  • Portfolios, launches and award-seeking marketing pages
  • Products whose differentiator is genuinely dynamic
  • Brands with the engineering budget to do motion well

Avoid when

  • Content is the point and motion delays reaching it
  • The audience skews toward vestibular sensitivity or older devices
  • Motion would be the only carrier of a state or a meaning

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • `prefers-reduced-motion: reduce` must produce a COMPLETE alternative presentation, not a stripped one: every piece of information conveyed by movement is present, laid out, and legible without any of it.
  • Nothing may flash more than three times per second, and no parallax may run under body text.
  • Motion never carries state alone. Selection, focus and status each need a static signal that exists whether or not anything moves.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Motion-forward awwwards energy — oversized kinetic display type, scroll-driven motion, asymmetric experimental composition.

Implementation bundle

Pro

What an agent needs in order to actually build Kinetic / Experimental on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Loading the implementation bundle…

Agent tags

The vocabulary a coding agent can match this style on.

  • motion-led
  • scroll-driven
  • transform-state
  • reduced-motion-complete
  • experimental