NestGen Motion System: scan, connect, route, resolve

A motion system by Prashant Singh

Every animation for NestGen '26 is built from these four verbs. Each has one job and one colour from the cube, so motion explains itself: what appeared, what's related, where you're going, what's confirmed.

See the components

The animation library didn't load, so every component is shown in its final state.

PRINCIPLES

Each verb answers one question for the viewer. Its colour shows which verb is acting, and when the motion settles the colour returns to white. Every verb also has one thing it must never be used for.

How to use it: Read the question on each card, then click its demo to replay the verb.
Why it helps: When every movement answers one of four questions, people understand what changed without reading anything.
The idea behind it: The cube already had blue, violet and orange faces and a white arrow. Each became a verb, so the brand explains its own motion.

MOTION TOKENS

Five durations, four curves, one stagger and three distances. Short moves are quick, long moves take longer, and nothing overshoots.

How to use it: Press Play on a panel to compare speeds and curves side by side. Copy the code block straight into a project.
Why it helps: Shared numbers make every animation feel like one product, and quick feedback keeps the interface responsive.
The idea behind it: Distance decides time. A small nudge is quick and a long journey takes longer, the way real objects move.

Duration

Each bar is as long as its duration, so all five dots travel at about the same speed. Choose the duration by the distance.

Stagger and distance

Related items arrive 60ms apart: headline, supporting line, then metadata. Each distance has a matching duration.

Building the Physical AI Stack

Sarah Chen, VP Robotics

Tue 29 Sep, 14:30 IST

Easing

Four curves cover every move, shown here at 1 second so you can compare them. Exits reuse the feedback curve in reverse, so things leave faster than they arrive.

Tokens for developers

This page's CSS and GSAP timelines read from these exact values.

/* NestGen motion tokens 2.0 */
--dur-instant:    120ms;  /* hover, press, status */
--dur-micro:      200ms;  /* icons, labels, borders */
--dur-component:  320ms;  /* cards, content swaps */
--dur-expressive: 600ms;  /* speaker reveal, session handoff */
--dur-event:     1000ms;  /* long routes, rare */

--ease-feedback:   cubic-bezier(.22, 1, .36, 1);
--ease-standard:   cubic-bezier(.65, 0, .35, 1);
--ease-expressive: cubic-bezier(.16, 1, .3, 1);
--ease-route:      cubic-bezier(.37, 0, .63, 1);
--ease-exit:       cubic-bezier(.64, 0, .78, 0);  /* feedback, reversed */

--stagger: 60ms;     /* primary, secondary, metadata */
--travel-s: 8px;     /* paired with instant */
--travel-m: 24px;    /* paired with component */
--travel-l: 64px;    /* paired with expressive */

/* mobile: travel x0.5, durations x0.85, no grid decoration
   reduced: travel 0, durations capped at 200ms, opacity only */

COMPONENTS

Seven parts, laid out on the same zones, make four templates. Every template plays the verbs in the same order and changes only its layout. Content is data, so the next speaker or session drops straight in.

How to use it: Pick a format or state above a stage. Drag the timeline under it to scrub, or slow it to ½× or ¼×. Show layout zones to see where content can grow.
Why it helps: The order never changes: image, then name, then details. Viewers learn where to look, so every new post is understood faster.
The idea behind it: Seven shared parts build every template. Swap the content and the motion stays the same.

Parts

Each part belongs to one verb. A new part needs a verb before it gets a design.

Stays fixed

The order: scan first, then connect or route, then resolve last.
One colour per verb, and white once the motion settles.
Curves, the 60ms stagger and the duration scale.
Status top left and the NestGen lockup top right of every frame.
Connector corners (18px) and line weight (1.5px).
One signal dot per frame. It is the only thing that travels.

Adapts

Layout and type size for 16:9, 1:1, 4:5 and 21:9.
The connector's path, which routes around the content.
Distance: half on phones, none with reduced motion.
Duration: 15% shorter on phones, 200ms at most with reduced motion.
Which verbs a template needs. A session change has nothing to scan.
Content length. Each zone reserves room for its longest line.

Component 01

Speaker announcement

One template for the website, LinkedIn, Instagram and event screens. Each format has its own layout; the sequence and timing never change.

SCAN Brackets lock on and the scan line reveals the portrait.
CONNECT A line runs from the portrait to the name.
Name, then role, 60ms apart.
CONNECT The line continues to the session.
RESOLVE The session lands last, colour drains and the status reads Confirmed.

Parts: brackets, scan line, dot field, connector, nodes, status tag
Timing: event scan, component lines, expressive type

Component 02

Countdown and agenda

The number is a field of dots. Changing it re-scans the same field, so the frame, labels and date track stay where they are. One template shows days left, the start time, the next session and agenda updates.

SCAN The scan line crosses the dot field and the number appears.
ROUTE An arrow leads the eye from the number to the details.
Details arrive top to bottom, 60ms apart.
ROUTE The arrow moves along the date track and past days are struck through.
RESOLVE The route cools to white and the status updates.

Parts: dot field, scan line, signal arrow, status tag
Timing: event first scan, expressive re-scan and route, component swaps

Component 03

Session transition

No wipes and no fades to black. The live session's status dot is the one thing that persists: the card folds into it, the dot travels, and the next card grows out of it. A faint thread stays behind, so the change reads as one programme moving on.

Content leaves in reverse order: metadata, speaker, title.
The card folds into its top edge, then into its status dot.
ROUTE The dot travels through empty space, never across content.
The next card grows from the same dot: edge first, then frame.
RESOLVE Title, speaker and metadata land, and the route cools to a thread.

Parts: signal dot, connector (as the thread), status tag
Timing: micro exits, component folds, event route, expressive type

Component 04

Website hover card

Quiet until you point at it. The card answers within 120ms and plays all four verbs in under half a second. Room for the extra detail is reserved, so nothing shifts and nothing covers the title. On touch screens, tap a card to open it.

Parts: brackets, scan line, connector (as the border), signal arrow
Timing: instant feedback, micro and component beats; leaving plays back at 2×

The card lifts 1px and grows 1%. The border brightens.
SCAN Brackets snap to the corners as one line passes.
CONNECT The border traces itself.
ROUTE The arrow steps 4px forward.
RESOLVE The extra detail appears and colour settles to white.

ACCESSIBILITY

Motion follows your device's reduced-motion setting, and you can switch it here for the whole page. Phones get their own profile with shorter travel and less decoration. With motion reduced, every state still reads correctly; changes become short crossfades.

How to use it: Switch between Full motion and Reduced, here or at the top of the page, then play all three versions to compare them.
Why it helps: Large movement can make some people feel unwell. Reduced motion keeps every message clear with short fades instead of travel.
The idea behind it: Motion supports the content but never carries it alone. Every state reads correctly when nothing moves, and every colour is also named in words.

Desktop

Phone

Reduced motion

Behaviour	Desktop	Phone	Reduced motion
Scan	The line crosses the dot field or portrait	Same line, 15% faster	The final state fades in over 200ms
Connect	The line draws and the node pulses once	The line draws, no pulse	The line fades in with its content
Route	The signal dot travels the full path	Shorter path, one turn	No travel; the next state fades in place
Type	Rises 24px behind a mask, 60ms apart	Rises 12px, 60ms apart	Fades only, 30ms apart
Hover	Lift, brackets, border trace, arrow step	Tap opens the final state	Border and colour change only
Decoration	Background grid	No grid	No grid

SHOWCASE

All four components in one continuous take, about 29 seconds. The signal dot carries from each component into the next, so the reel reads as one system rather than four demos.

How to use it: Press Play motion system and keep the mouse still until the controls hide, then start recording.
Why it helps: Seeing everything in one take shows the components behave as one family, not four separate animations.
The idea behind it: One signal dot travels the whole reel, carrying your eye from each component into the next.

Opens over the page in a 16:9 frame. Controls and the pointer hide when the mouse is still. For a clean recording, switch your browser to full screen first.

Space pause R replay Esc close

00:00Four verbs3s
00:03Speaker announcement5s
00:08Countdown 03, 02, 017s
00:15Session transition7s
00:22Hover interaction4s
00:26NestGen lockup3s