A Vistaro timeline is a list of steps, and each step has an action. This page plays every one of them on the same mockup — pause any clip, step through it, replay it. The whole page is one screen (showcase/index.html) and twelve small timelines in this repo.
The 20-second overview: a highlight, a real click, character-by-character typing, a camera push, a staggered chart build and a closing fade — one timeline, in the order you'd tell the story.
The cursor travels with a human drift, a spotlight frames the target, a ripple marks the press — and a real el.click() fires, so the page's own handlers do the reacting.
Text lands character by character at a human pace, through real key events — React-style controlled inputs see genuine keystrokes, not a pasted value.
The element takes the page's real focus — its own focus ring lights up. Works on anything focusable: inputs, buttons, links.
The cursor glides onto an element and its :hover styles respond — the lift, the shadow, the color change are the mockup's own.
No cursor, no target — just the keyboard: Enter, Tab, or a chord like Control+K. Where type fills the field, press submits it.
A spotlight pulse that says notice this — no click, no state change. The ring sizes itself to whatever you point at.
Push in on a detail, glide to the next one without a cut, pull back to the full frame — a camera on rails, with easing. The cursor and spotlight ride along.
Smooth-scroll a buried element into view — inside any scrollable container, or the page itself.
Reveal anything pre-hidden in CSS on cue — a result card, a toast, the whole page as an opening beat. display and opacity are handled together.
Cross-fade between two screens authored in one file — a multi-screen story without a real navigation, and every other action keeps working on the new screen.
The free-form one: Web Animations from a from state to a to state — transforms that compose, any CSS property, every match of a selector with a stagger, and seven named easings from linear to spring.