Skip to content
Template

Next.js Template for animated UI demo clips.

A reusable template for making short animated clips of an interface — the kind you put on a landing page, in a deck, or in a post.

0.24 downloads

What’s inside

  • react, node, animation, react-bits, kokonut, acterntiy

A reusable template for making short animated clips of an interface — the kind you put on a landing page, in a deck, or in a post.

Filming UI motion by hand is fiddly. You move the mouse, the hover fires late, the timing slips, and you shoot it again. And again. This plays the same run every time instead.

Every page below is a fixed 1600×900 frame with a cursor that drives itself. You write the mouse path as a short list of points, and it moves, hovers and clicks real components, so they react just as they would for a person. Add ?take=1 to the address and the page plays a four-second run same path, same timing, same last frame, every time. Record your screen, or save any single frame as an image.

Six come ready to run, each built with a different component library. Copy one, swap in your own content, and it is your clip. Press a number key to jump to one.

reactnodeanimationreact-bitskokonutacterntiy

Back to all resources

Want this built properly, for you?

Tell us the number you need to move. We will come back within one working day with an honest read on whether we can move it — and what it would take.

  • A written diagnosis before any proposal
  • Fixed scope, fixed price, no change-order games
  • You own the code, accounts and design files

We value your privacy

We use cookies to analyse site traffic and improve your browsing experience. By clicking “Accept all”, you consent to our use of cookies. You can change your choice at any time. Read our Privacy policy.