Bloques

Secciones de página completas construidas con componentes de Volt, con el movimiento ya resuelto. Cada bloque es un solo archivo: cópialo, renómbralo y borra lo que no quieras.

Mostrando 7 de 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.

Características

Feature Bento

2 átomos

Cuadrícula asimétrica donde cada tarjeta ilumina su propio borde bajo el 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.

Características

Escaparate de funciones

3 átomos

Una capacidad grande y tres de apoyo, cada una dibujada como pide su contenido.

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.

Características

Historia con scroll

2 átomos

Pasos que se apilan al hacer scroll, con CSS puro: una lista normal en pantallas pequeñas y con movimiento reducido.

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.

Características

Del código a la vista

5 átomos

Una configuración a la izquierda y el componente que produce a la derecha: ambos salen de un mismo valor, así que no pueden contradecirse.

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>

Características

Recorrido de funciones

4 átomos

Un recorrido guiado: la explicación a un lado y la propia función funcionando en vivo al otro.

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.

Características

Carrusel de ventajas

1 átomos

Los motivos para elegirte, en una fila que se desplaza con puntos de anclaje, flechas y teclado.

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);
  }
}

Características

Playground

5 átomos

Cambia un ajuste, mira el resultado y copia el CSS que lo produce.

Un archivo cada uno

Plantilla, estilos y comportamiento en un único componente standalone.

Sin runtime de animación

CSS y un manejador de puntero. Nada que añadir a tu bundle.

Consciente del tema

Construido sobre tokens, así que cada preset y el modo oscuro vienen incluidos.

Próximamente

Las categorías de arriba son la forma del conjunto; estas cubren los huecos.

Logo Cloud

Pronto

Logotipos de clientes que se asientan en su sitio según llega la sección.

FAQ

Pronto

Acordeón construido sobre la primitiva accesible, con un campo de búsqueda encima.

Stats

Pronto

Cifras que cuentan hacia arriba una vez, la primera vez que entran en pantalla.

Team

Pronto

Retratos que cambian por un cargo y un enlace cuando los apuntas.

¿Te falta alguno? Abre una issue y pasa al principio de la cola.