Build interfaces
that feel alive
A complete set of liquid glass-style components—glass morphing, animated backgrounds, and full responsiveness.
Custom Properties
A complete system of design tokens based on CSS variables—palette, glass, typography, indents, transitions, layout.
Reset & Base
Minimal reset, antialiasing, custom scrollbar, ::selection, basic typography.
Header H4 — Inter 700
Main text — Inter 400, line-height 1.65. Select this text to see a custom ::selection with an accent color.
Monospaced text — JetBrains Mono 400
Light Theme Tokens
A complete set of tokens for the light theme, switchable via [data-bs-theme="light"]. Click the button at the bottom right to switch.
Graceful Degradation
@supports (backdrop-filter) — without support backdrop-filter components use a solid background instead of glass.
prefers-reduced-motion
When the low-dynamics mode is enabled, all animations and transitions are disabled, and background blobs are hidden.
Animated Background Scene
4 animated blobs with CSS animations and filter: blur(80px), creating a liquid effect behind the glass panels.
Glass Utility Classes
Utility classes for glass panels of varying intensity.
Focus Visible
Custom outline on :focus-visible — accent color, 2px, offset 2px. Press Tab to check.
Card
A glass card with a hover effect that lifts and glows. Available in basic and accent versions.
Translucent surfaces with background blur create a sense of depth and layering.
Accent frame and glow to highlight priority content.
A minimalist card without an image – for profiles, quotes or statistics.
Button
4 options: Primary, Ghost, Glass, Danger. Size sm / default / lg. Pill-option. Icons.
Badge & Tag
Badge — status labels with color options. Tag — closable tags with a glass background.
Input
Text fields, textarea, with icons, with errors, with hints.
Checkbox & Radio
Custom checkboxes and radio buttons with a glass background and accent fill when selected.
Switch
Smooth sliding switch with glowing thumb when activated.
Tabs + Panels
Tabs with an animated indicator strip and smooth panel appearance.
This is where user profile information is displayed, including name, avatar, contact information, and activity statistics.
Interface settings: theme, language, notifications, content density, hotkeys.
Two-factor authentication, session history, active tokens, IP whitelist.
Accordion
Expandable panels with smooth max-height animation and rotating arrow icon.
This is a set of UI components built on glassmorphism - translucent surfaces with background blur, adapted for Bootstrap 5.3.
Click the button with the sun/moon icon in the lower right corner of the page. The theme is switched via the data-bs-theme attribute on the root element.
Yes, on screens smaller than 992px, the sidebar is hidden and accessible via the hamburger button. Components are rearranged into a column on mobile devices.
Modal / Dialog
Modal window with backdrop-blur, zoom animation and fade-in.
Подтверждение действия
Вы уверены, что хотите удалить выбранные элементы? Это действие нельзя отменить. Все связанные данные будут удалены безвозвратно.
Toast / Snackbar
Уведомления с анимацией slide-in, прогресс-баром и автоскрытием.
Tooltip
Чистый CSS tooltip с анимацией появления и стрелкой. Появляется при hover.
Dropdown / Select
Кастомный выпадающий список со стеклянным меню, анимацией и подсветкой активного пункта.
Chip
Фильтр-чипы с выбором, аватаром и удалением. Клик переключает состояние.
Анна
Максим
Ольга
Avatar Group
Группы аватаров с перекрытием, счётчиком «ещё» и статусами (online/offline/busy).
Breadcrumb
Хлебные крошки с точечным разделителем вместо стрелок.
Skeleton Loader
Анимированные плейсхолдеры с shimmer-эффектом для загрузки контента.
Stepper
Step-by-step indicator with states: completed, active, waiting.
Data Table
Data table in a glass container with hover-lighting of rows.
| Component | Status | Version | Author |
|---|---|---|---|
| Card | Done | 1.0.0 | Helen |
| Button | Done | 1.0.0 | John |
| Modal | Done | 1.0.0 | Ana |
| Data Table | Beta | 0.9.2 | Nick |
| DatePicker | Planned | — | — |
12 Animations
Key animation set: fade-up/down/left/right, scale-in, rotate-in, blur-in, slide-up, pulse-glow, float, shimmer, ripple. prefers-reduced-motion.
Page Layout & Hero
A fixed sidebar with navigation, a main content area with maximum width, and a hero section with CTA buttons. The sidebar collapses on mobile devices.
Theme Toggle
The button in the lower right corner switches data-bs-theme between dark и light, updating all CSS variables through the cascade. The state is saved in localStorage.
Click the button in the bottom right to switch the theme. All tokens, panes, animations, and components will adapt automatically.
Responsive
Three breakpoints: 992px (sidebar), 576px (mobile). Grid systems use auto-fill/minmax.