Production-ready UI blocks for landing pages, dashboards, and web apps.
Two-column layout with main article and right sidebar containing related article cards with thumbnails. Perfect for discovery-focused content.
Two-column layout with main content on left and sticky author profile card on right with social links. Great for individual contributor articles.
A full article layout with a ruled byline row, a wide lead image, prose blocks that carry their own anchors, an accent-ruled pull quote, a closing tag row, and a contents rail that sticks beside the text on desktop.
Three-column layout with TOC left sidebar, main article center, and action buttons with tags right sidebar. Best for technical documentation.
Exhibition split into artist rooms, each with a sticky statement column beside its works, opening a viewer that shows the chosen piece large with the next one waiting as a thumbnail you can step straight into.
A developer tool hero over the ascii-render component: a rotating lattice form and drifting noise are raymarched into a low-res cell buffer, then printed with a monospace glyph ramp in the theme's foreground with primary highlights, and cells light up around the cursor. A headline, an intro, an Arrow Pill and an underline link sit on the quiet side. Every scene setting passes through the ascii prop; colors follow the theme, it pauses offscreen, shows a still frame for reduced motion and falls back to a dot grid without WebGL.
An open question FAQ pairing a soft panel that sticks while you scroll, holding a working question and email form, with the questions others sent recently answered as linked hairline entries.
A header with a serif headline that settles in word by word and a pill that copies the install command on click, then a rounded pill tab list (pages, sections, components). Each tab pairs a title, a paragraph and a short list of example prompts in mono with a photo that blurs in and drifts on scroll.
An assistant section where question pills swap the image tile beneath them, each floating a live answer card that cites the records it read, closing on three hairline guarantees and one action.
One oversized lead figure paired with a ruled, right-aligned stack of supporting stats split by a vertical rule.
40/60 asymmetric split hero with narrow content panel and vertical quick links over video
Alternating rows with tall highlight card and stacked compact cards over background media
A centred overview for a small hotel: a quiet eyebrow, a large serif heading and two short paragraphs side by side, above three tall muted cards that each carry a hand-drawn line glyph (sunset, olive branch, ferry, key or lantern) drawing itself in and one large serif fact.
A full-height photographic hero: the image drifts at a slower pace than the page behind a film-grain overlay, and a serif headline settles in word by word ahead of the intro, a soft pill button and an avatar trust line.
Onboarding screen with a quick survey asking how the user discovered the product, with selectable options and an optional text input. Perfect for marketing attribution during signup.
Four publication figures on hairlines, each carrying a label and a short note on how that number was measured rather than leaving the reader to trust it.
A who-is-it-for section with pill tabs under a serif heading that settles in word by word: each audience blurs in a serif title, a description, dotted points and a sliding-marker pill beside a portrait photograph drifting inside its frame.
Pill tabs for each audience swap a split panel holding a tall photograph beside a title, summary and ruled list of what that audience actually gets.
Fully functional audio player with Now Playing card, playlist view, progress bar, skip controls, and waveform animation.
Filterable audit trail showing user actions with create, update, delete, and access type indicators. Includes resource, user, and timestamp info.
Interactive call-to-action card with animated aurora gradient blobs and mouse-following spotlight effect. Creates an immersive, eye-catching conversion section.
Prominent author profile with large avatar display, followed by featured image below title. Best for thought leadership or expert opinion pieces.
Full-bleed hero whose background photographs cross-fade on a timer, with a caption and bar indicators on a ruled line at the foot that also let a reader jump straight to a frame.
A workflow that scores each stage on how much of it runs unattended, drawing an accent bar per stage and naming what still needs a person, against a sticky column with one headline figure and a live stage tracker.
Animated carousel with progress bar and auto-advance through questions. Engaging for featured FAQs.
An availability table for a development: filter pills by home type and a sort select above rows of unit, floor, type, interior area, aspect, price and a dot-plus-word status (available, reserved, sold). Changing the filter or the sort fades the list out and rises the new rows in one by one under hairlines, sold rows are muted, and a count with a pricing note closes the table.
Dense grid of subscriber avatars with centered heading overlay and call-to-action. Perfect for community-driven conversion.
Recognition section pairing a ruled list of awards with two to three highlighted project thumbnails.
Editorial list of studio awards by year with project and recognition details.
Vertical list of awards and accolades with icons, titles, organizations, and years. Ideal for press and credibility sections.
Product availability alerts with email and SMS signup options. Displays waitlist counter to create urgency and social proof. Perfect for out-of-stock product pages and inventory waitlists.
An about section built around a wide photograph that drifts inside its frame: a serif heading that settles in word by word above it, then an intro with a sliding-marker pill beside four ruled serif figures that count up as they arrive.
Horizontal banner call-to-action with heading and action buttons side by side. Perfect for inline conversion sections between content blocks.
Panoramic image with split header showing numbered process steps alongside. For studios and creative agencies.
A design school hero on a strict twelve-column grid: a heavy sans headline, an intro and a Turn Arrow block button with an underline link on the left, and on the right the bauhaus-composition background component, a living constructivist poster of circles, quarter circles, squares, bars and hairline rules that springs into a new balanced arrangement every few seconds, leans away from the cursor and moves on at a click. Every composition setting passes through the composition prop.
A contact-and-location section on a real map: street and satellite tiles with a style switch, dragging, double-click and keyboard zoom that glides between levels, a pin for the hotel that drops in, icon markers for nearby beaches and stops that center the map when clicked, and a dark contact card with a large phone number and a directions link. Built without a map library.
Two-column sponsorship pitch with benefit highlights, audience reach statistics, and contact CTAs. Perfect for attracting event sponsors and partners.
Side-by-side before/after comparison lists with a testimonial quote below. Perfect for demonstrating transformation results or product impact stories.
Side-by-side comparison cards with bullet lists showing pain points vs. solutions after transformation. Perfect for demonstrating product value, workflow improvements, or competitive advantages.
Interactive toggle that switches between two sets of feature items with staggered fade-in animation. Pill-style toggle button with distinct visual states for before and after. Great for product comparisons.
Interactive image comparison component with a draggable divider supporting horizontal and vertical orientations. Perfect for showcasing transformations, photo editing results, or design improvements.
Interactive image comparison slider with draggable handle for before and after views. Supports both mouse and touch input.
A centered hero with a small sentence case eyebrow, a large light heading, a short paragraph and two buttons. Below sit two tall stages with sharp corners side by side: on a warm gradient a long draft scrolls while its page counter crawls, and on a blue gradient a cursor clicks a chapter in the outline and the page opens right there.
A centred serif headline that settles in word by word, then two columns: a muted panel listing how an agent improvises today and an ink panel listing what it does once the library is installed. Between them, on a hairline, sits the pill that copies the install command on click.
A results section stacking each measure on its own hairline row, moving a muted starting figure to an accented result across an arrow, with a soft closing panel that floats a live comparison card.
A pinned scroll feature section for a restoration studio that shows three projects as before and after photographs. As the page scrolls, a soft vertical seam travels across the frame and wipes each room from its worn state to the restored one, then the frame crossfades to the next project. A round handle on the seam can also be dragged, or moved with the arrow keys, to compare by hand. A side column carries the eyebrow, heading and intro, then each project's place, title and one sentence with a before and after label pair that follows the seam. When no before photo is given, the after photo is aged with a faded, stained treatment so the wipe reads as a restoration. Reduced motion shows each pair side by side.
Coming soon section with a side-by-side comparison table showing current limitations versus upcoming improvements. Perfect for SaaS upgrades and product relaunches.
Kitchen tour section with hero image, station features, certification badges, and tour booking CTA. Perfect for showcasing kitchen facilities and food preparation areas.