Premium · à la carte

Interactions

A catalogue of behaviour, attached to structure.

Hover states, click handlers, scroll effects and transitions as a reusable catalogue — linked to the wireframe sections they animate.

Gå med i väntelistan →Läs dokumentationen →
Interactions
ENSV
AJ
AI & Development

Interaction Choreographer

A library of micro-interactions — spring physics, tactile state feedback and hover choreography. Token-aware and copyable. Copy the CSS and drop it into any component.

Search interaction…
All 41Physics 7Hover 8State 7Loading 7Scroll 6Entrance 6
Save changes
Physics CSS
Spring press

Compresses and springs back on press — feels alive, not binary.

Use in project
Hover me
Hover CSS
Glow aura

An ambient glow expands around the element on hover.

Use in project
State CSS
Toggle slide

The knob slides and the track changes color on/off (pure CSS, :checked).

Use in project
Loading CSS
Breathing dots

Three dots pulse in sequence — organic and non-mechanical.

Use in project
Our services
Physics CSS
Elastic underline

Underline grows elastically from the center on hover.

Use in project
Premium plan
Hover Copied!
Shine sweep

A glint of light sweeps diagonally across the surface on hover.

Use in project
invalid@email
State CSS
Error shake

An invalid field shakes sideways — a natural rejection.

Use in project
Loading CSS
Skeleton shimmer

A wave of light sweeps across a placeholder row while content loads.

Use in project
Tip: Ask the AI to “choreograph this button” with a description of your component — it suggests the right interaction from the catalog and generates the whole implementation.

Den riktiga Interactions-modulen — samma tema, samma layout som appen. Exempeldata.

Problemet och hur sSystm löser det

Problemet

"Make it feel alive" is not a spec. Interaction intent lives in the designer's head until implementation, where it becomes whatever the deadline allows.

Så gör sSystm det

Interactions is a catalogue of behaviour — hovers, clicks, scroll effects, transitions — defined once and linked to wireframe sections. The intended behaviour is part of the plan, not an afterthought.

Vad Interactions ger dig

Byggd på djupet, så modulen faktiskt bär tyngden av riktigt klientarbete.

01

Reusable interaction patterns

Hover states, click handlers, scroll effects and transitions — named, described and reusable across projects.

02

Linked to wireframes

Attach an interaction to a wireframe section, and the behaviour ships with the structure into the build.

03

Spec, not vibes

The AI building the screen reads the intended behaviour instead of improvising it.

Din AI, via MCP

When your AI builds from a wireframe, linked interactions tell it how the screen should behave — the choreography is in the data, not in a hope.

Så fungerar människo-grinden

Wireframes

Structure screens before you build them.

Läs mer

Layouts

Named layout patterns for consistent structure.

Läs mer

Build

AI-powered Cloudflare Workers builder.

Läs mer
Interactions · Premium — à la carte

Sätt Interactions
i arbete.

Gå med i väntelistan — när din plats öppnas provisioneras ditt workspace på ditt eget Cloudflare-konto och du slår på modulerna du behöver. A catalogue of behaviour, attached to structure.

När du är inne: ingen e-post, inget lösenord — en Cloudflare-tilldelning · kärn-workspace gratis · din data bor i ditt eget konto