Production-ready UI blocks for landing pages, dashboards, and web apps.
A hero with the eyebrow and heading on the left and the description with two buttons on the right, above one borderless stage of fixed height on a gradient background that fades into the page. Three glass product cards sit on the stage as an overlapping cluster on desktop, a main card in the center with two smaller ones tucked behind its upper left and lower right corners. On smaller screens only the main card is shown, centered.
A centered hero for an installation studio built on the anamorphic-type component: the headline is cut into thousands of fragments traced from its own font and scattered in depth, drifting as an abstract constellation while the camera orbits, then easing into the one true viewpoint every few seconds where the words snap into focus. The cursor steers the camera. An eyebrow, an intro, a Turn Arrow block button and an underline link frame it. Every anamorphic setting passes through the anamorph prop; the real heading stays in the page.
Horizontal progress bars that grow with spring animation on scroll. Each bar shows a label, value, and percentage fill.
Split layout with a floating image wrapped in a rotating conic gradient border. Includes a soft glow backdrop and hover zoom for a premium, modern feel.
Split layout with a video card featuring a rotating conic gradient border and gentle floating animation. A glowing backdrop adds depth behind the video.
Coming soon section with floating animated icons and a pulsing status indicator using Framer Motion animations. Perfect for creating visual excitement and a dynamic atmosphere before a product launch.
Side-by-side intro with animated number counters on scroll, expanding accent bars, and hover-lift value cards. For impact-driven companies.
Full-bleed monochrome hero with a giant heading and a row of clickable tab chips that fade between text panels (title, description, stat), auto-advancing on a timer with no background swap.
Minimal navbar with configurable animated underline effects (slide, grow, or fade) on navigation links. Perfect for portfolio sites and creative agencies wanting subtle hover animations.
A centered pre-launch section with a square eyebrow, a heading, a supporting line, a row of accent statistics that count up when scrolled into view, and a dark seal claim-seat button.
A feature that centers one image tile floating a live metrics panel and annotates it from both sides with four icon callouts that collapse under the tile on smaller screens.
A central core image framed by feature cards that each reference how a module connects back to the system's core.
Browser-framed product screenshot with surrounding feature callouts.
A navbar with a dark announcement strip above a hairline-bordered row carrying a lowercase wordmark, uppercase links, a sign-in link, an accent call to action, and a mobile menu.
Centered single card with badge, heading, description, and highlight pill. Great for announcements, feature release highlights, or promotional callouts.
Navbar with a dark scrolling announcement bar on top — looping links that pause on hover and fade at the edges — over a clean wordmark row with a pill CTA.
A sticky navbar topped by a thin ink announcement bar with a small-caps link, then a frosted bar with the serif wordmark, uppercase links that underline from the left on hover, a sliding-marker pill, and a light full-height mobile menu whose links settle in one after another.
A single announcement laid out like an article, with a standfirst, a full-bleed captioned photo band, a reading column, and a sticky rail carrying the key facts and related entries.
An annual results section pairing an image tile that floats a live breakdown chart with a light interpretation of it, then four hairline readings that each name their own source, closing on a method panel.
Annual pricing tiers showing per-month equivalent cost and yearly savings. Perfect for encouraging annual commitments with clear value display.
A help section that asks two questions instead of offering a search box: the answers pick one written answer from a list of routes, an image tile beside them floats the answer as a live assistant card and changes with it, and a soft panel underneath keeps a way through to a person.
A lens maker's pinned scroll hero over the aperture-reveal component. The section opens on a closed camera iris set in a turned metal ring, with the eyebrow and a large heading above it and a pinpoint of light at the center. Scrolling turns the brushed metal blades open, then the ring grows past the frame until a night sky photograph fills the screen, and the heading, a short description, an Arrow Pill and an underline link settle at the lower left over a soft scrim. The text moves between clean states instead of fading with the scroll, the light on the metal follows the cursor, and reduced motion shows the open photograph with the text in place. Every iris setting passes through the aperture prop.
Interactive REST API endpoint reference with method badges, expandable parameter details, and response types. Grouped by resource.
A developer section that lists common endpoints as hairline rows pairing tone-coded method chips with monospace paths, beside a dark code panel holding a full sample request and its response.
Browser-chrome card pairing a DevTools-style API inspector on the left with a syntax-highlighted code editor on the right — method badge, response body, timing footer. Every label is editable; no media props required.
API key management panel with masked credentials, reveal/copy controls, scope badges, and active/revoked status indicators.
Technical reference with endpoint cards, HTTP method badges, and side-by-side request/response examples. Perfect for API documentation.
API documentation cards showing response examples with color-coded status badges. Headers section, JSON body with copy button, success/error variants.
API pricing table showing tiered rate per request with volume discount breakdown. Perfect for developer APIs and infrastructure services.
API analytics dashboard with endpoint usage table. Stats cards for requests, latency, error rate, and active users. Trend indicators and method badges.
A product bar with a wordmark, plain links, an Apps trigger and an initials avatar. Apps opens a floating card holding a four by three grid of app tiles, each an icon square, a name and a one-liner. On phones the top bar keeps the brand and a fixed bottom tab bar carries five icon tabs, the centre one raising the app grid as a sheet. The card and the sheet stay in the markup and are toggled with CSS.
Terminal-style structured log viewer with level filtering. Color-coded INFO, WARN, ERROR, and DEBUG entries with timestamps and source labels.
Three intake questions that land on a real appointment type instead of a drop-down: the answers pick a route with its length, its facts, and the clinician you will sit with, and the image tile beside them swaps its floated availability card to match.
Upcoming and past appointments list grouped by date, with service name, provider avatar, time, duration, status badges (confirmed/pending/cancelled), and reschedule/cancel action buttons.
An approval workflow drawn as a vertical rail of nodes tinted by whether each step is done, waiting, or queued, naming the person and the timestamp, beside a tile floating the live request card.
Mobile app promotion footer with phone mockup screenshot, feature highlights, download stats, app store badges, and QR code. Perfect for mobile app marketing pages.
An app pre-launch split card with a muted panel holding a wordmark, a monospace parenthetical eyebrow, a heading, a working email waitlist form and platform chips, beside a full-bleed image covering the other half.
An artistic boutique hotel hero on a plain ground: a tall doorway arch rises open like a curtain from a drawn horizon line to reveal a room photograph, a sun disc in the theme colour sinks behind the arch as you scroll, and a serif headline splits either side of it, with a short intro, a sliding-marker pill and a text link.
A warm paper hospitality hero built around one tall arched window: inside it, the horizon-gradient background component paints a dusk sky with a low sun on a hazy horizon, a shimmering trail and drifting cloud streaks, rising softly on load. The headline sits to the left of the arch and the intro, a dark Arrow Pill and an underline link to the right, anchored to the bottom; on small screens they stack around it. Every sky setting passes through the sky prop.
An architect's statement for a development: an eyebrow, a long pull-quote set as the section heading, the architect's name, role and practice on a hairline row, and three practice figures (years, homes, awards) that count up from zero under hairlines once they scroll into view.
One column per year on a hairline, each stating the year as a figure with its published count beside it, a sentence on what that year was about, and the pieces that defined it.
Text-first archive index of reference, thumbnail, title and year, opening a record card with two sides: the work on the front and the registrar's acquisition, condition and storage notes on the back.
An area guide for a development's location page: an eyebrow, heading and lead, then four figures (average price, five-year growth, residents, green space share) in a four-column row under hairlines, each counting up from zero over 1.4 s once in view and formatted as currency, number or percent; a paragraph about the neighbourhood and a source footnote sit on a hairline row below.
A local guide strip for a hotel: portrait experience cards that start in line with the heading and bleed off the right edge, snap as you swipe or step with arrow buttons, lean in on hover under a small category pill, and carry a serif title, a short note and how far it is, with a hairline that fills as you scroll.
A full-height hotel hero: the photograph zooms out on load and drifts slower than the page, a serif headline settles in word by word, and a stay bar whose arrival and departure open a two-month range calendar, a guest stepper and a check availability pill submits straight to your booking engine.
Technical article with code blocks featuring language labels, filenames, and copy-to-clipboard buttons. Ideal for programming tutorials.
Article with full comment system, replies, likes, and featured comments. Perfect for community-driven discussions.
Three-column layout with table of contents on left, main article in center, and right sidebar for related content. Perfect for long-form guides.