Blocks

29 larger compositions — scenes, calendars, settings, empty states.

Auth

Block · Inspired

Sign-in

A sign-in card with social providers, email and password, a magic-link alternative, inline validation and a submitting state.

Calendars

Block · Adapted

Event calendar

A day, week and month calendar for real schedules: overlapping events sit side by side, drag on empty space to create, drag an event to move it across days, drag its bottom edge to resize, an all-day lane, a live now-line and a details popover. Event colours come from the chart series, so they follow the accent and dark mode.

Card illustrations

Block · Copied

Agent team

A prompt types itself and branches out into three agents, each with a role and overlapping tool logos

Block · Copied

Cover flow

Browse covers in 3D – drag, flick or scrub the row, it springs to the nearest cover; images drift in their frames over a soft reflection

Block · Copied

Empty calendar

Stack of calendar cards marked empty, fanning out on hover

Block · Copied

Enrichment orbit

Grok tile inside two rings with comets and data nodes orbiting around it

Block · Copied

Frost cloud

A frosted white cloud with eyes cut out of it, on a red-orange or blue sky – it floats, turns to look around, blinks, follows the pointer and bounces with a wink when clicked

Block · Copied

Ghosted chat

Unanswered chat messages marked as read, with a thumbs-down reply on hover

Block · Copied

Glow cloud

A glowing cloud with eyes in blue or red-orange – it floats, turns to look around, blinks, follows the pointer and bounces with a wink when clicked

Block · Copied

Integration grid

Honeycomb-like wall of integration logos around a bright centre tile with your product mark, fading out toward the edges

Block · Copied

Layer stack

Isometric stack of five layers with a list beside it – the chosen entry lifts its layer out in color

Block · Copied

Lead sourcing

ChatGPT tile linked to Gmail and Grok, with a shine running along the connection

Block · Copied

Logo cluster

Your mark on a white disc in the middle – company logos bounce out of it and settle around it

Block · Copied

Model wheel

AI model names on a turning drum – the rows bend away at the edges and each model lands on a soft gray fill

Block · Copied

Side folder

Glassy blue folder on its side, documents sliding out to the right as the pocket swings open on hover

Block · Copied

Tab overload

Overlapping browser windows where the highlight follows the hovered tab

Block · Copied

Team invite

Connected teammates – a cursor drags a new one into the empty slot, the line turns solid and they go online

Empty states

Block · Inspired

Empty state

An illustration, a headline, a sentence of why, and one or two actions, for lists and pages with nothing in them yet.

Footers

Block · Inspired

Halftone footer

A site footer that ends on the brand word as a halftone dot screen cropped by the bottom edge, with dots that part around the pointer and ripple on click.

Interactive illustrations

Block · Copied

Hairline figure

33 isometric line drawings that answer the pointer: pillars rise, app layers part, a terminal scrolls back, a commit graph lifts its history. Zero dependencies, one shared animation loop, light and dark.

Block · Copied

Iso figure

Solid, shaded isometric drawings of small machines that explain an idea by working, in a plate with a figure number, title, hint, live readout and legend. Comes with a press-and-pull test rig and the kit to draw your own. Zero dependencies, light and dark.

Maps

Block · Copied

DACH region

DACH map with fading neighbours and a pastel band along the border, switchable to the US, China, India, Brazil or Japan

Pricing

Block · Inspired

Pricing table

Plan cards with a monthly / yearly switch, a highlighted plan, included and excluded features, and prices that roll to the new number.

Product scenes

Block · Copied

Integration beam

Your product between the tools it connects – light pulses flow along curved beams, hover to focus a tool, click to pause it

Review

Block · Inspired

State catalog

A gallery of screen/state screenshot cards grouped by screen, filterable by status and viewport, with a detail lightbox and a bug list beside it — the UI that ui-sweep writes into a Ref.

Settings

Block · Inspired

Settings panel

Titled sections of setting rows, each with a label, description and a switch, select or your own control. Includes a Switch.

Social proof

Block · Copied

Logo marquee

The endless “Trusted by” strip – a seamless loop that eases to a stop on hover, scrubs with inertia and lifts the hovered logo to colour

Block · Copied

Testimonial wall

The landing-page wall of quotes – columns that scroll endlessly in opposite directions, ease to a stop on hover and scrub with inertia

Technical drawings

Block · Adapted

Spec sheet

An Apple-style dimensional drawing of a UI component: one monochrome sheet with a plan view, exploded layers, detail circles, radius and corner details, and variable tables (S1, R2 = R1 − B − S6). Comes with a finished card sheet and the SVG kit to draw my own. Follows the theme.