Live primitives

APIs you can click

This chrome is a nested layout chain. Desk pages sit in two shells; Motion only uses the outer one. Sibling navigations keep parent controllers mounted.

nc-animation

You pick a preset name. The component picks the cheapest path: CSS compositor loops, GPU Web Animations for enter/attention, or a canvas overlay for particles.

Three paths

<nc-animation name="fade-in" trigger="visible"> <div class="subject">Scroll-reveal uses IntersectionObserver plus GPU opacity.</div> </nc-animation>

Live example

Scroll-reveal uses IntersectionObserver plus GPU opacity.

<nc-animation name="pulse" trigger="hover" iterations="infinite"> <nc-button variant="primary">Hover me</nc-button> </nc-animation>

Live example

Hover me

<nc-animation name="spin" trigger="mount" iterations="infinite" duration="2400"> <div class="live-spin-mark" aria-hidden="true"></div> </nc-animation>

Live example

Compositor keyframes. No JS after start.

<nc-animation name="confetti" trigger="click"> <nc-button variant="success">Celebrate</nc-button> </nc-animation>

Live example

Celebrate

Particles paint a full-viewport canvas overlay.

Playground

Change preset, trigger, timing, and particle options. The snippet below stays in sync with the live element.

Preset

Trigger

Duration (ms)

Delay (ms)

Distance (px)

Easing

Iterations

Play

Cancel

Stage

NativeCoreJS

Trigger is manual — use Play to run the preset.

This page only uses the outer Live shell — there is no Desk layout in the chain. Switch back to Desk and the inner shell mounts again.