Blocks

Whole page sections built from Volt components, with the motion already wired. Every block is one file: copy it, rename it, and delete the parts you do not want.

Showing 7 of 23

Why teams pick it

Everything you need, nothing you have to unlearn.

Plain Angular components in your own repository. No runtime to upgrade, no theme API to fight.

Motion that ships with the markup

Every interaction here is CSS and a pointer handler — no animation runtime, no bundle cost, and it degrades to a static section when the visitor asks for reduced motion.

@keyframes
mask-composite
pointermove
prefers-reduced-motion

Accessible underneath

Roles, focus order and keyboard paths come from the primitives, not from markup you have to remember to write.

Themed by tokens

Five colour presets, five shape presets, light and dark. Blocks inherit them because they never hard-code a colour.

Copy, do not install

The source lands in your repository. Rename it, gut it, keep it — nothing upstream can break it later.

Composed from real components

Buttons, cards, switches and avatars you already use, arranged. Nothing here is a one-off.

Features

Feature Bento

2 atoms

Asymmetric grid where each card lights its own border under the cursor.

Capabilities

One platform, four things done properly.

Start with the one you need. The others are already there.

Insights that explain themselves Core
Every metric ships with its trend, its baseline and the change that moved it — no second tab needed.
Usage that never surprises
Limits are visible before they are reached.
Seats used
An API you can read
Typed end to end, with examples that run.
```
client.report.get('q3')
  .then(r => r.total)
```
Built for teams
Roles, reviews and shared views from day one.

Features

Feature Showcase

3 atoms

One large capability and three supporting ones, each drawn the way its content wants to be shown.

How it works

From idea to shipped section in four moves.

Step 1: Describe the outcome
Start from what the visitor should be able to do, not from the screens. One sentence is enough.
Step 2: Compose from real parts
Assemble the section from components that already handle focus, state and theming.
Step 3: Check it in every theme
Semantic tokens mean the same markup holds up across presets, dark mode and your own palette.
Step 4: Ship the source
Copy the file, change the words, keep the behaviour. Nothing to install but what you already use.

Features

Scroll Story

2 atoms

Steps that stack as you scroll, in plain CSS — an ordinary list on small screens and with reduced motion.

Source to result

Read the config. See the component.

notice.ts

Source

const notice = {  tone: 'success',  title: 'Deployed to production',  message: 'Build 482 is live in 14 regions.',  action: 'View release',};

success

Result

Deployed to production

Build 482 is live in 14 regions.

Features

Source to Preview

5 atoms

A config on the left, the component it produces on the right — both read from one value, so they cannot disagree.

Four things that are awkward to build by hand.

Each one is running live. Pick a tab, then try it.

01 · Hover & press

Feel it under the pointer

Feedback while something is true: the pointer is over it, it is pressed. Touch gets press feedback, not a sticky hover.

Hover & press

State

Presence

Stagger

Pressed 0×

save-button.html

<button class="lift press">Save</button>

Features

Feature Tour

4 atoms

A guided tour: the explanation on one side, the feature itself running live on the other.

Built for state. Here's why.

The framework already animates simple enter and leave. This exists for the part that is hard to coordinate by hand.

Signals in, motion out
Bind a value and the element animates to its new state, without a change-detection detour.
Native browser animation
Playback runs on the platform, so transforms and opacity stay on the compositor. Nothing extra to ship.
Presence that owns lifetime
An element stays mounted until its exit has finished — including rows that are reordered mid-exit.
Safe on the server
Every browser API waits for the browser. Server rendering, hydration and zoneless apps work out of the box.

Features

Feature Carousel

1 atoms

Reasons to choose you, in a row that scrolls with snap points, arrows and the keyboard.

Change a setting, see the motion, copy the code

This is the real animation, not a recording. The CSS is generated from the same values you are editing.

Preset

Easing

Duration: 500ms

fade-up

played 0×

card.css

.card {
  animation: fade-up 500ms ease-out both;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

Features

Playground

5 atoms

Change a setting, watch the result, copy the CSS that produces it.

One file each

Template, styles and behaviour in a single standalone component.

No animation runtime

CSS and a pointer handler. Nothing to add to your bundle.

Theme-aware

Built on tokens, so every preset and dark mode come along.

Coming soon

The categories above are the shape of the set; these fill the gaps.

Logo Cloud

Soon

Customer logos that settle into place as the section arrives.

FAQ

Soon

Accordion built on the accessible primitive, with a search field over it.

Stats

Soon

Figures that count up once, the first time they are scrolled into view.

Team

Soon

Portraits that swap for a role and a link when you point at them.

Missing one you need? Open an issue and it goes to the front of the queue.