Production-ready UI blocks for landing pages, dashboards, and web apps.
A monochrome three-column grid of uniform project cards, each pairing an image with a title, client / year / service chips, and a link to the case.
A centred hero: eyebrow, a serif headline settling in word by word, intro and two sliding-marker pills, then a wide photograph that unveils itself from a smaller inset frame and keeps drifting as the page scrolls, closed by a row of dotted facts.
Minimal upcoming-runs banner: calendar header, a featured next-run callout, and four compact upcoming entries with relative timing and cron expression.
A newsletter-forward pre-launch section with a monospace parenthetical eyebrow, a heading and subscribe pill button on top, and a three-card grid of upcoming articles each with a kind label, title, and summary.
A quiet updates signup for a development: heading and lead on the left; on the right a GET form with an email field, a fieldset of interest rows (Phase 2 launch, price changes, viewing days, construction updates) each a checkbox with a label and a one-line description under a hairline, then the submit pill beside a privacy line.
A tall borderless band filled with a live ridgeline plot that dissolves into the page at the bottom. One glass card floats in the middle of the band and holds an eyebrow, a heading, one sentence and two buttons. At the foot of the card a 30 day uptime strip with hover details serves as proof.
Usage-based pricing calculator with interactive slider showing tiered breakpoints. Perfect for API services and consumption-based products.
A two-column calculator: seat and volume sliders, a billing period switch, and add-on toggles on the left, and a summary card on the right whose rolling price and line items follow every change. The base price, per-seat and per-unit rates, included amounts, yearly discount, and currency are all props.
Minimal quota meter card: header with usage label, large used/limit counter, a single progress bar, and a reset countdown footer.
Responsive grid of use case cards with hover effects, images, descriptions, and feature checklists. Perfect for displaying solutions for different industries or customer segments.
3-column grid of image cards with text overlay, hover zoom effect, and arrow indicators. Perfect for showcasing team use cases, industry solutions, or department-specific features.
Navbar with a marked wordmark and a pill-highlighted trigger that drops a floating rounded mega panel — a parenthetical label over a 3x2 grid of icon use-case cards. Sign-in pill plus a primary CTA.
A thin utility row with a locale link, Help and Log in sits over the main bar of logo, links and two buttons. The Products item drops a full-width panel of four link columns with a featured article card on the right: a 3:2 image, a title and a read link. The phone menu is a right side drawer with accordion groups and the utility links at its foot. Every panel stays in the markup and is toggled with CSS.
A photographic footer under a dark gradient scrim, soft drifting light and film grain: a serif closing statement that settles in word by word, a rounded newsletter field with a sliding-marker pill, three link groups, and a bottom row with the wordmark, social links and copyright.
Bundle pricing cards with images, savings badges, itemized contents, and order buttons. Perfect for family meals, combo deals, and catering packages.
A value proposition with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, a wide image panel holding a floating segmented stat card, and a three-column benefit row.
A value proposition with an eyebrow kicker over a hairline rule, a two-column heading and paragraph, and three portrait image tiles that each float a live micro-asset above a title and description.
Two centered statements on a dark surface, each with an accent heading, an uppercase paragraph, and a small label beneath.
Full-width team photo with a three-column values grid below. Great for culture pages and brand storytelling.
A sticky, frosted navbar with a serif wordmark, uppercase letter-spaced links that underline from the left on hover, a sliding-marker pill action, and a full-height ink mobile menu whose links settle in one after another.
A release feed with a sticky version rail that filters the list, and hairline entries carrying a version and date line, tone-coded tags, an accent-bulleted highlight list, and an optional release note link.
A relaunch coming-soon section with a centered square eyebrow and heading, a working early-access email form, and a grid of what's-new feature cards with icons.
Full-bleed hero whose background crossfades across items, steered by a minimal vertical pager pinned to the right edge. The active control grows taller while the rest stay short and dimmed; a giant heading and the clickable active item name sit bottom-left.
Full-bleed monochrome hero whose background crossfades to the active project. A giant heading sits bottom-left while a numbered vertical project index on the right highlights and swaps the active row on hover, click, or auto-loop.
Two vertical image columns scrolling in opposite directions frame the centered call-to-action content. Creates a dynamic gallery wall effect.
Comparison that splits horizontally instead of down the middle: a draggable divider wipes the upper photograph away to expose the lower one, with pill labels and a caption for each state.
A vertical process: a sticky column with a serif heading that settles in word by word, an intro and a pill action, beside numbered ringed steps down a line that draws itself in ink as the page scrolls, each with a small-caps timing, a serif title and a description.
Left sidebar tabs with right content panel. Traditional tab interface for category-based FAQs.
Logo and links left-aligned with one outline button on the right. The Solutions item opens a panel with vertical tabs on the left, moved by hover, click or the arrow keys, and a link grid on the right that swaps per tab while every grid stays mounted. The phone menu is a drill-down overlay whose groups slide left to reveal a sub-list with a Back button. Panels stay in the markup and are toggled with CSS.
Centered timeline with alternating left-right content cards, icons, images, and feature lists. Perfect for showing project phases, company history, or process stages.
Vertical timeline layout with step indicators, descriptions, and a connecting progress line. Perfect for workspace setup flows with detailed step explanations.
Article with featured video player, thumbnail preview, and watch time display. Ideal for video-first content with accompanying text.
Looping background video behind a frosted glass content card with badge, heading, description, and action buttons. Creates an immersive, cinematic feel.
Immersive hero section with autoplay video background, centered overlay text, and dual CTA buttons. Perfect for travel brands wanting to create an emotional first impression with cinematic content.
Full-width video background with dark overlay and translucent glassmorphism stat cards. Immersive hero-style stats section.
Asymmetric bento-style grid with one large video spanning two rows alongside two stacked smaller videos. CTA content sits above the grid.
A split media section for a development: a 4:3 muted looping video on the left that is unveiled top to bottom once it can play and drifts against the scroll, with a round play and pause toggle in its corner, beside a rule eyebrow, a heading, a lead paragraph, three figures on hairline rows and a pill button on the right.
Staggered horizontal bars slide away in alternating directions on hover, revealing a looping video behind them like opening window blinds. Text transitions to white for readability over the video.
Video preview section with thumbnail image, centered play button overlay, duration badge, and CTA buttons below. Perfect for product demo videos and explainer content.
A 2x2 grid of looping videos playing simultaneously behind a semi-transparent overlay card. Creates a dynamic, energetic backdrop for the call-to-action.
Cinematic call-to-action with a looping background video, gradient overlay, and bottom-aligned content for an immersive hero section.
A development hero on a wide video frame that is unveiled from the top once the clip can play, with a dark scrim rising from the bottom; a rule eyebrow, a large sans headline, a lead and two pill buttons sit bottom-left on the footage, and a round mute toggle in the top corner switches the sound of the autoplaying, looping, inline clip.
Video showcase section with thumbnail image, play button overlay, duration badge, and modal video player. Perfect for personal introduction videos or portfolio reels.
Welcome screen featuring a video thumbnail with play overlay and duration badge. Perfect for product tours that use video content to demonstrate features.
A video lesson hero section with course info, thumbnail with play button, and lesson navigation. Perfect for online courses and video-based learning platforms.
Video-focused news section with large thumbnail, play button overlay, duration badge, and related stories sidebar.
A full-bleed image pre-launch teaser with a dark overlay, a monospace parenthetical eyebrow, a central play button that opens the teaser video in a modal, a heading and supporting line, and a light outline waitlist pill button.
Video testimonial cards with thumbnail previews, play buttons, and modal player. Perfect for customer success stories or product review videos.