@balick

The monochrome colour palette, radius and dark mode used by every Balick UI component and block.

An infinite scrolling track for logos, testimonials or anything else.

Reveal content with a soft blur and fade, on mount or when scrolled into view.

A button with a beam of light travelling around its border.

A lightweight SVG grid background with optional highlighted cells.

A grid of dots, with a few that glow in turn.

A field of small squares that flicker at random, drawn on a canvas.

A grid floor in perspective that slides toward the horizon.

Concentric rings that breathe from the center, behind a logo or a button.

Soft rays of light that fan down from the top and sway slowly.

Veils of light that drift slowly across the top of a section.

A paper grain that gives flat surfaces some texture.

A grid whose cells light up under the pointer and fade out behind it.

Thin lines that ripple like silk and part around the pointer.

Layout primitives shared by every block: Section, Container and SectionHeader.

Brand icons for social links (GitHub, LinkedIn, X, YouTube), which lucide-react no longer ships.

A small live indicator with a pulsing halo, in four tones.

A single choice between a few options, with a pill that slides to the selected one.

A number that rolls up or down to its new value when it changes.

Counts up to a number once, when it scrolls into view.

A button or link whose arrow nudges forward on hover and focus.

Copies a text to the clipboard; the icon turns into a check mark.

A button that shows the progress of its action: idle, loading, success or error.

Hold to confirm, for actions that are hard to undo.

On hover, the label rolls up and an identical copy takes its place.

A button that leans a few pixels towards the pointer.

A button that sends a soft ripple out from where it is pressed.

A soft light follows the pointer inside the button.

An icon button whose label slides out on hover and focus.

Switches between light and dark; the sun grows into a moon.

Cycles through words in place, each one sliding up into view.

Reveals a line word by word, each part fading in from a light blur.

Types phrases character by character, with a blinking caret.

Letters start scrambled and settle one after the other.

A light sweeps across the text, for work in progress.

A marker stroke draws behind the words once they scroll into view.

A link whose underline draws in on hover and focus.

Long text clamped to a few lines, with a button that unfolds the rest.

Days, hours, minutes and seconds left until a date, each rolling to its new value.

Example usage of Marquee.

Example usage of Blur Fade.

Example usage of Shimmer Button.

Example usage of Status Dot.

Example usage of Segmented Control.

Example usage of Animated Number.

Example usage of Number Ticker.

Example usage of Grid Pattern.

Example usage of Dot Pattern.

Example usage of Flickering Grid.

Example usage of Retro Grid.

Example usage of Ripple.

Example usage of Light Rays.

Example usage of Aurora.

Example usage of Grain.

Example usage of Interactive Grid.

Example usage of Wave Lines.

Example usage of Section.

Example usage of Arrow Button.

Example usage of Copy Button.

Example usage of Status Button.

Example usage of Hold Button.

Example usage of Text Roll Button.

Example usage of Magnetic Button.

Example usage of Ripple Button.

Example usage of Spotlight Button.

Example usage of Expand Button.

Example usage of Theme Toggle Button.

Example usage of Word Rotate.

Example usage of Text Reveal.

Example usage of Typewriter.

Example usage of Scramble Text.

Example usage of Shimmer Text.

Example usage of Highlight Text.

Example usage of Underline Link.

Example usage of Expandable Text.

Example usage of Countdown.

Sticky navigation bar that turns translucent on scroll, with an accessible mobile menu.

Centred hero with announcement pill, animated headline, product preview and a scrolling logo cloud.

Left-aligned hero with key figures and an animated deploy terminal. No logo strip, so it pairs with logos-01.

Personal introduction with availability status, social links and a scrolling list of tools. Made for portfolios.

Hairline grid of customer logos with a short introduction.

Two-column introduction with paragraphs, key figures and skills.

Bento grid of four illustrated features, followed by a row of secondary features.

Six features in a hairline grid, with a left-aligned header.

Twelve integrations in a hairline grid, next to a sticky header and a link to the full list.

Grid of projects with screenshots, summary, year and stack. Draws a placeholder when a project has no image.

Masonry wall of customer quotes with names, roles and initials avatars.

Three-tier pricing with an animated monthly / yearly toggle and a highlighted plan.

One all-inclusive plan: what's included on one side, price and call to action on the other.

Accessible feature comparison across three plans, grouped by category, with the featured plan highlighted.

Two-column FAQ: sticky header with a contact link, and an accessible accordion built on native disclosure elements.

Three recent articles with a cover, category, date, author and reading time.

Email signup card with a confirmation state; posts to a configurable endpoint.

High-contrast call to action panel with a subtle grid and two actions.

Contact panel with a copyable email address and a list of channels.

Contact form with a confirmation state, next to email, phone, address and opening hours.

Four key figures with short descriptions, in a hairline grid.

Company story as a vertical timeline, with a sticky header.

Numbered list of services with a starting price, deliverables and a link.

Four numbered steps joined by a connector, horizontal on desktop and vertical on mobile.

Team members with an avatar, role, short bio and social links.

Multi-column footer with newsletter form, status indicator, social links and an oversized wordmark.

Single-row footer with links and socials, and a legal line.

Brings a list or a grid in one item after the other, on mount or when scrolled into view.

Example usage of Stagger.

Uncovers an image or a card with a mask that slides across it.

Example usage of Mask Reveal.

Items that circle around a center while staying upright.

Example usage of Orbit.

A card that leans toward the pointer in 3D, with a soft glare.

Example usage of Tilt Card.

A layer that moves at its own pace while the page scrolls.

Example usage of Parallax.

A bar that fills as you scroll the page or a panel.

Example usage of Scroll Progress.

A three-quarter ring for a percentage, colored past its thresholds.

Example usage of Gauge.

A level in a few segments, such as the strength of a password.

Example usage of Segment Meter.

Twelve bars that fade in turn, for waits the size of an icon.

Example usage of Spinner.

The history of a service, one bar per day, colored by how the day went.

Example usage of Uptime Bar.

A pill that names the state of a service, with a live dot.

Example usage of Status Badge.

Three dots that pulse in turn, sized like the text around them.

Example usage of Loading Dots.

A count pinned to an icon or an avatar, which pops when it changes.

Example usage of Count Badge.