Блоки

Цілі секції сторінки, зібрані з компонентів Volt, із уже налаштованим рухом. Кожен блок — це один файл: скопіюйте його, перейменуйте й видаліть те, що не потрібно.

Блоки, макети чи рецепти?

Блоки 23 Готові секції сторінки — hero, ціни, футер. Зі стилем і анімацією: скопіюйте одну й змініть тексти.
Макети 10 Структури сторінок без бренду — оболонки застосунків, екрани входу, дошки. Каркас, який ви наповнюєте своїм продуктом.
Рецепти 5 Поведінка в часі — валідація, асинхронний пошук, відновлення. Перевірений сценарій, а не зовнішній вигляд.

Показано 7 з 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.

Можливості

Feature Bento

Атомів: 2

Асиметрична сітка, де кожна картка підсвічує власну рамку під курсором.

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.

Можливості

Вітрина можливостей

Атомів: 3

Одна велика можливість і три допоміжні, кожна зображена так, як цього потребує її зміст.

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.

Можливості

Історія зі скролом

Атомів: 2

Кроки, що нашаровуються під час скролу, на чистому CSS — звичайний список на малих екранах і за зменшеного руху.

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.

Можливості

Від коду до результату

Атомів: 5

Конфігурація ліворуч і компонент, який вона створює, праворуч — обидва беруться з одного значення, тому не можуть розходитися.

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>

Можливості

Тур можливостями

Атомів: 4

Тур із поясненням з одного боку та самою можливістю, що працює наживо, з іншого.

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.

Можливості

Карусель переваг

Атомів: 1

Причини обрати вас — у ряду, що прокручується з точками прив'язки, стрілками та клавіатурою.

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

Можливості

Пісочниця

Атомів: 5

Змініть налаштування, подивіться результат і скопіюйте CSS, який його створює.

По одному файлу

Шаблон, стилі та поведінка в одному standalone-компоненті.

Без рантайму анімації

CSS і обробник вказівника. Нічого додавати до бандла.

Враховує тему

Побудовано на токенах, тож кожен пресет і темний режим працюють одразу.

Незабаром

Категорії вище — це форма набору; ці заповнюють прогалини.

Logo Cloud

Скоро

Логотипи клієнтів, що стають на місце, коли секція з'являється.

FAQ

Скоро

Акордеон на доступному примітиві з полем пошуку над ним.

Stats

Скоро

Числа, що набігають один раз, коли вперше потрапляють в область перегляду.

Team

Скоро

Портрети, що змінюються на посаду й посилання, коли на них наводять.

Бракує потрібного? Створіть issue і він піде першим у черзі.