The web blocks we ship on real client sites.

A slim, dismissible top-of-page banner with an icon, message, action button and a learn-more link, built on a gradient background with a grid-pattern overlay. Use for a limited-time offer or a site-wide announcement, not for anything a visitor must see (it is designed to be closed and forgotten).

Infinite horizontal logo marquee with mask-faded edges and a hover-to-slow speed control, licensed MIT. Good for a client or integrations strip under a hero. Needs at least 6 to 8 logos of similar visual weight or the loop will look sparse and uneven.

Centered FAQ section, label plus headline plus description above a single-column expandable accordion, licensed MIT. Simplest default for a small-business landing page with under 8 questions. The accordion items themselves live in the linked shadcnuikit source, not in this demo file.

CSS-only animated gradient background and glowing border on hover, two color variants, licensed MIT. Good as a single hero or pricing-page primary CTA, using it for every button on a page dilutes the effect and slows scanning. The GradientButton implementation itself is not shown, only this usage wrapper.

Lead-generation hero for booking or scheduling products: headline plus dual CTA on the left, a live-feeling app mockup on the right. Swap the mockup content for whatever the product actually does; keep the two-button pattern (primary action plus a lower-commitment demo/tour link).

Onboarding explainer for any three-step process (setup, workflow, purchase flow). Works well right under a hero. Replace the step copy but keep the numbered-card rhythm, it reads as fast and low-effort to a visitor.

Feature grid where each card carries a tiny illustrative UI snippet instead of a plain icon, makes abstract features feel concrete. Best for product marketing where you have 4 clear, distinct capabilities to show. Swap each mini-mockup for something true to your own UI.

Catch-all grid for secondary features that do not deserve full cards, e.g. security, languages, integrations, small differentiators. Drop this after the main feature grid so the page does not feel like it stopped selling too early.

Neutral social-proof strip for right under the hero. Use real client wordmarks once you have permission to display them; grayscale keeps them from competing with your own brand color.

Four-column pricing where the target plan is visually lifted and inverted to dark, drawing the eye without needing a giant arrow or callout. Works for any SaaS or service with a good/better/best/custom ladder. Keep exactly one card featured, two dilutes the effect.

Detailed row-by-row plan comparison for buyers who need to justify the upgrade to a boss or partner. The highlighted column should match whichever plan carries your best margin. Only ship this below a simpler card-based pricing table, never as the sole pricing view.

Two-card testimonial layout using initials avatars instead of photos, useful when you do not have signed photo releases yet. Swap in real headshots later without touching the layout. Keep quotes under 160 characters or the cards get uneven.

End-of-page closing banner, dark background to signal 'last stop' after a long light-background page. Pair a strong primary action with a lower-friction alternative (sales call, demo) so both self-serve and enterprise visitors have a next step.

Zero-JS accordion built on native details/summary, so it works even if a page's JS bundle fails to load. Good default FAQ block for any landing page. Keep answers to 2-3 sentences; anything longer belongs on a help center page.

Small floating confirmation toast used inside feature sections or as a standalone success state after a form/booking submits. Keep the copy to one line of detail; this is a glance-and-move-on element, not a receipt.

Visual metaphor for 'we connect to everything', a hub node with dashed lines out to satellite app icons. Good directly above or below a logo cloud of actual integration partners. Keep it to 4 satellites max, more than that reads cluttered at small sizes.

Standard SaaS footer, one brand column plus four link columns and a language selector for international traffic. Drop columns that do not apply rather than leaving them empty; an uneven 3-column footer still looks intentional.

Compact trust row for under a hero or above a final CTA, mixing review-platform ratings. Only use real, current scores, this pattern loses all credibility the moment a visitor checks and finds a mismatch.

Use for SaaS or product-tool landing pages that need a dark, technical first impression. Skip for warm consumer brands, the near-black ground reads cold.

Load-triggered reveal, each word blurs in on a stagger. Re-trigger on route change by toggling a class rather than replaying automatically, replaying every scroll gets annoying fast.

Three-up value prop grid, works for any B2B tool. Swap the inline SVGs for whatever icon set the client already uses, do not leave the placeholder geometric icons in production.

Text stands in for logo marks here, swap spans for real client-approved logo SVGs at consistent height. The mono micro-label under the row is what sells the credibility, keep it short.

Bold lead clause stays fully opaque, the rest of the sentence dims until the block is half in view. Good for a single mission-style statement between feature sections, not for body copy.

Great for showing product depth on a features page without a real screenshot. The typing-dots row implies a live collaborative tool, drop it if the product has no chat or comments.

Static kanban illustration for a product/features page, not a real board. Keep to 3-5 items per column so it reads at a glance, more than that looks cluttered at hero scale.

Roadmap/gantt visual for a planning-tool features page. Bar widths are illustrative, wire to real milestone data if this ever leaves marketing and becomes a real product view.

Auto-cycles which status row is highlighted every ~2s to imply a live feed. Cap at 3-4 rows, the highlight cycle gets hard to follow past that.

Shows a user prompt, a brief working state, then the agent's structured output. Timing is fixed at 1.4s here, tie it to a real async call if this pattern ships inside an actual product instead of a marketing page.

Pairs a code diff with a linked PR list to sell a dev-tool feature. Keep the diff to 2-4 lines, a real full diff breaks the compact card layout.

Three-card changelog teaser for a homepage or product page, links out to a full changelog. Hover-lift is the whole interaction, do not add more motion on top of it.

High-contrast colored cards against a near-black page make testimonials pop instead of blending into a gray wall of quotes. Swap the two accent colors per client brand, keep the dark page ground fixed for contrast.

Four-tier table with one highlighted plan, tag placed on the top border like a floating label. Reads best with 3-6 bullets per tier, more and the cards go uneven height.

Closing-section CTA, works right above the footer on any marketing page. Keep it to exactly two actions, a primary and a lower-commitment fallback.

Six-column dark footer, first column is reserved for the logo mark only, keep it uncluttered. Collapses to 3 then 2 columns on smaller widths, test the wrap point against the client's actual link count.

Click-to-play video hero, thumbnail scales into a modal player on click. Good for a SaaS or product-demo hero above the fold. Needs an embeddable video URL (YouTube embed format), swap the thumbnail image per client.

80s-style perspective grid, pure CSS animation, no JS cost. Works well behind a bold gradient headline for a synthwave or gaming-adjacent brand. Skip for conservative/professional-services clients, reads too loud.

SVG dot grid with a radial fade mask, subtle enough to sit behind body copy or a pricing table. The glow prop adds a mouse-follow highlight if you want more motion. Safe default background for any vertical.

Diagonal streaking-light overlay, layer it over a dark hero or a 404/empty-state screen. The number prop controls density, keep it under 20 on mobile or it tanks paint performance.

Two rows scrolling opposite directions with edge fade masks, classic social-proof section. Pure CSS animation, no framer-motion needed. Swap in real client testimonials, never fabricate quotes.

Tilted CSS-perspective wall of marquee columns, high visual impact for a portfolio or agency landing page. Heavier than the flat marquee, test on low-end mobile before shipping. Not for content-dense B2B pages.

Character, word, or line-level reveal with a dozen animation presets (blurInUp, slideUp, scaleUp, etc). Use `once` so it does not replay on every scroll re-entry. Good default for section headlines, avoid stacking more than one per screen.

Classic character-by-character typewriter effect with a blinking cursor, supports looping through multiple phrases. Works well for a rotating value-prop line under a hero headline. Keep phrases short, long strings make the loop feel slow.

Wraps one word in a shifting multicolor gradient to draw the eye in a hero headline. Pass a custom `colors` array to match brand palette instead of the default rainbow. Use on one word max per headline, more reads as noisy.

Small rounded pill with a slow-moving gradient border, standard pattern for a 'what's new' announcement above a hero headline. Pairs naturally with a chevron icon and a link to a changelog or release note.

Scrambles random characters before settling on the real text, triggers on hover by default or on scroll-into-view with startOnView. Good for a nav label or a small interactive detail, overkill for body copy or long headlines.

Vertically swaps one word at a time inside a fixed headline, common for '[Verb] your business [rotating word]' hero patterns. Keep words the same rough length so layout does not jump between swaps.

Continuous small star sparkles appear and fade around the text, best used sparingly on one badge-like word (e.g. 'Featured', 'New'). Pass a `colors` object to match the sparkle color to brand accent.

Liquid letter-morph transition between words in a fixed sequence, more fluid than a hard swap like Word Rotate. Reads as premium/techy, good for a SaaS hero, skip for a local-service business site.

Pins the section and fades in words one by one as the user scrolls past it, a common long-scroll storytelling pattern. Needs enough vertical scroll room to breathe, do not use inside a short section.

Tracks the cursor and paints a soft radial spotlight plus a highlighted border on hover, wraps around any shadcn/ui Card content. Needs next-themes for the dark/light gradient color swap, strip that if the project has no theme provider.

Animated light beams connect icon nodes to a central hub, the standard 'we integrate with your stack' section. Requires wiring up a ref per node, count on light code work to swap the icon set and node count.

A single light beam that continuously travels around a container's border, drop it inside any card or button wrapper with `position: relative` and `overflow: hidden`. Cheap way to signal 'this is the highlighted plan' on a pricing card.

Two concentric rings of icons orbiting a center point at independent speeds and directions, pure CSS keyframes under the hood. Common for a hub-and-spoke integrations section, swap in the client's own logo set.

Counts up from 0 (or a custom start value) to a target number when scrolled into view, supports decimals via decimalPlaces. Standard for a stats row (customers served, uptime %, dollars saved). Trigger once per view, do not loop.

Circular gauge that animates its fill to a target percentage, useful for a skills/completion widget or a dashboard KPI card. Set gaugePrimaryColor to the brand accent so it does not default to indigo.

Continuous light streak travels along the button's rounded border on a dark fill, pure CSS. Good primary CTA for a dark hero section, avoid pairing with more than one other animated element in the same viewport.

Animated conic-gradient border and glow, ships with a solid and an outline variant. High-attention CTA, best reserved for a single pricing page's featured plan rather than every button on a site.

Uneven-sized CSS grid of feature tiles, each tile can hold its own background visual or animation. Standard 'why us' section layout, three to six tiles reads best, more than that gets cramped on mobile.

Each item slides and fades in on a staggered delay, then the list scrolls to make room for the next, loops on a timer. Built for a 'live activity feed' demo panel next to a product screenshot. Cap it at 4-6 unique items before they repeat.

Use for every primary and secondary action across the library. Six variants and four sizes cover text buttons, icon buttons, and destructive actions without hand-rolled CSS.

Base container for stat blocks, list rows, and form wrappers across the library. Compose with CardHeader, CardContent, and CardFooter instead of overriding the base padding by hand.

Standard modal for confirmations, short forms, and detail views triggered by a button click. Ships with an overlay, focus trap, and close button already wired, do not rebuild those by hand.

Switches between related content panels in place, no page navigation. Use the default segmented look on dashboards, keep to two or three tabs before it belongs in a sidebar instead.

Short hint text on hover or keyboard focus. Wrap the app root in one TooltipProvider, do not nest a provider per tooltip, and skip tooltips for anything a mobile user needs to read since hover does not exist there.

Slide-in panel for mobile nav, filters, or a secondary form without leaving the page. Defaults to the right edge, pass side to dock left, top, or bottom instead.

Small status or count label inline with text or in a card corner. Do not use it for anything clickable, reach for Button size sm instead.

Single-line text field for forms, already themed for light and dark. Pair with the Field and FieldLabel primitives for consistent spacing instead of wrapping it by hand.

Multi-line field that grows with its content via field-sizing-content, no manual rows tuning needed. Use for messages, notes, and longer form answers.

Dropdown for choosing one option from a list, keyboard and screen-reader accessible out of the box via Radix. Use a native select instead when the form is short and the extra JS is not worth it.

User or brand image with a text fallback when the image fails to load. Use AvatarGroup (same registry entry) to stack several for team or reviewer lists.

Collapsible sections for FAQs, settings groups, or long-form content. Keep only one item open at a time on marketing pages, allow multiple open on dashboards and settings screens.

On/off toggle for settings and preferences that apply immediately. Use Checkbox instead when the choice is part of a form that still needs a submit step.

Standard checkbox for form selections and multi-select lists. Pair with Label and wrap both in a Field container so the whole row is a click target, not just the box.

Inline banner for page-level warnings or confirmations that should stay visible until the user acts. Use it for form-level errors, not for a transient success message, that belongs in a toast instead.

Contextual menu triggered by a button or icon, supports nested submenus and checkbox items. Use it for user menus and row actions, not as a stand-in for primary site navigation.

Wires react-hook-form and zod validation into the Input, Select, and Textarea primitives with accessible error messages tied to each field. Skip this and use plain Field and Label if the form has no validation rules to enforce.

Single-card login form with email and password only. Good default for internal tools where there is no social auth to wire up.

Two-column login with a full-height image on desktop that collapses to a single column on mobile. Swap the placeholder image and company name, the form itself is a separate login-form component pulled from the same source URL.

Centered login card built around one email field plus social login buttons and a legal footer. Use it when the client wants one-click sign-in via Google or Apple instead of a password.

Card-based signup form with name, email, password, and confirm password fields. Swap the field description copy for the client's own password rules and privacy language.

Compact signup form built around one email field with Apple and Google buttons below it. Use for low-friction signups where password creation happens later, after email verification.

Full dashboard shell: collapsible icon sidebar, team switcher, nested nav sections, and a user menu in the footer. Ships as five files (app-sidebar, nav-main, nav-projects, nav-user, team-switcher) plus the base sidebar primitive, pull all of them from the source URL, not just this one.

Dark gradient hero with three drifting blurred blobs and a small live-updating ticker chip above the headline, the texture Stripe uses to avoid a flat gradient. Swap the ticker for a real metric or delete it, it is decorative only.

Bento-style grid mixing a wide feature card with a payment-terminal mockup, a usage meter card with an animated fill bar, and a chat-style agentic commerce card. Good for a multi-product overview section, swap the three mockups per client's actual product set.

Self-contained checkout card with a monthly/annual pill toggle that updates the displayed price, and a card/bank payment method tab switch. Static mockup only, wire the buttons to a real payment processor before shipping to a client.

Four-stat row that counts up from zero when it scrolls into view, using IntersectionObserver plus requestAnimationFrame, no animation library needed. Swap the data-target/prefix/suffix attributes per stat, keep to four items or the row gets cramped on mobile.

Pure CSS infinite marquee, duplicate the logo group once so the loop is seamless and pause on hover so a visitor can read a name. Swap the text chips for real logo SVGs/images at matched heights.

Single pull-quote card with a colored left accent bar rather than a photo, works well in a grid of three when paired with a small logo mark under the name. Never fabricate an attributed quote, only use real customer language on client sites.

Accordion of case-study rows, only one open at a time, each reveals two stat chips on expand. Good for a customer-proof section without full case study pages. Replace the stat numbers and copy with the client's real, verifiable figures only.

Dark code card with a language tab switcher, the code types itself in on load and on tab change with a blinking caret, no syntax highlighter dependency, just monospace color and a caret pseudo-element. Great for a developer-facing product page, skip it entirely for local-business or non-technical clients.

Three pricing cards where the middle plan is visually elevated with a floating badge and a colored border instead of a filled background, reads as recommended without shouting. Keep exactly one featured card, two looks indecisive.

Interactive rate card where dragging each usage slider recalculates the line cost and the monthly total live, mirrors how Stripe visualizes usage-based pricing. Best on a usage-billing or API-product pricing page, overkill for a flat-fee service business.

Static invoice card with a to/from/memo block, itemized lines, and a total due, matches the shape of a Stripe-hosted invoice page. Drop into a billing or account-history section, keep the meta rows to three or four max before it feels cluttered.

Mini analytics card, bars grow from zero via a CSS custom property once the card scrolls into view, no chart library needed for a simple monthly comparison. Only use this shape when the numbers are real and pulled from the client's own dashboard data.

Stacked tab list where clicking an item swaps both the copy panel and the card's background gradient, gives a feature list some motion without a carousel. Limit to three or four tabs, more than that and the background changes feel busy.

Six-box one-time-code input that auto-advances focus as digits are typed and steps back on backspace. Use for a real 3D Secure or SMS step, not as a fake trust signal, and connect it to an actual verification flow before shipping.

Standard FAQ accordion, plus icon rotates 45 degrees into an X on open, multiple items can stay open at once since each panel is independent. Keep answers to two or three sentences, long answers fight the max-height animation.

Nav's full opener: eyebrow rises, headline lines lift out of masks, orange sweep lands under the emphasis word, sub fades in, CTA cascades, ring pulses. One choreography, ~2.5s.

Nav's headline signature, ported without SplitText. Each line sits inside its own overflow-hidden mask; a 15-line vanilla splitter measures wraps at layout time so it survives resize.

Orange bar sweeps under a keyword to punctuate a headline. Nav uses it under 'THIS IS THE FIX' — a full-stop for the eye.

Draws the eye to the button after the hero settles: soft ring expands and fades, button bumps 4% in size. One breath, then quiet.

Number eases from 0 to target with ease-out. Nav uses it for revenue and views — the resting state is the final number, so noscript readers see the truth.

Group of siblings rises together at 60ms offsets. Use it for stat rows, feature grids, list items entering on scroll.

Nav's 'silk-band' — a slow warm blur behind the hero that drifts on scroll. Purely atmospheric. Skip unless the hero is quiet enough to notice.

Each word fades in and lifts 14px, 60ms apart. Softer than line-mask — good for body-copy leads and sub-heads.

Every letter rises 12px with a tiny rotation, 25ms apart. Reserve for short headings (5-8 words max) — it gets busy fast.

Words come from blur(12px). Feels cinematic without much travel. Cheap on the compositor if you keep the blur below 16px.

Types out one character per ~50ms with a blinking bar. Slow-feeling — use only when the effect itself IS the moment (product name reveal, hero code sample).

Characters shuffle through random glyphs, then land. Great for numbers, product codes, dashboard headers. Locks left-to-right by default.

Cycles through a word list with a soft opacity crossfade. The softest of the three rotators — use for sub-heads where motion should feel ambient.

Words slide up out of the top of a mask while the next word rises in. Snappier than crossfade — the industry-page trick.

Two-copy trick: duplicate the track content, translate -50%, loop forever. No JS at all, and it survives resize because it moves the track, not the container.

Same trick, but paused when the mouse is over it — lets people actually read the items. One CSS rule, no JS.

Airport-departure-board style. Each digit rolls independently — slower feel than the eased counter, better for showy stats.

Link underline sweeps in from the left on hover. Nav uses this pattern on nav items — one of those details you notice only when it's not there.

A soft translucent bar sweeps behind a phrase, like a yellow marker. Slower and softer than the sweep-highlight bar — good inside body copy.

RGB-split with a stuttering clip. Reserve for one moment — logo reveal, 404 page, a single H1. Any more and it reads as broken.

Nav's centerpiece on /yeg. Dark card, ping-dot label, monospace typewriter body, orange tick + result appears after typing settles. Reads as 'this thing was just built' — perfect for FWON's own site or a demo.

Words rise out of masks with a 40deg X-axis rotation — more cinematic than a flat lift. Nav uses this for the /yeg hero H1. Give it perspective on the parent or the rotation looks flat.

The 'live now / just shipped' dot. One CSS keyframe. Nav uses it on eyebrows and inside the prompt-receipt header. Best paired with a monospace uppercase label — it inherits the pulse the eye reads as 'active.'

Chip 23 + a pill wrapper. Slot for status labels above the H1 ('Claude 101 · Edmonton · Sept 17') or category tags. Nav's exact eyebrow pattern.

Solid button where a darker fill slides in from the left on hover, and the arrow nudges. Snappier than a plain opacity hover, and it survives on dark backgrounds. Nav's primary CTA.

Cards tilt toward the cursor's X/Y and a soft glow follows underneath. Nav uses it on feature cards. Pointer-fine only — pass the media query so touch devices get a flat card.

Ambient dot-grid that slowly translates diagonally, softly masked toward the center so it fades at the edges. Nav's hero backdrop. Pure CSS — one background-image + one keyframe.

Two big blurred color orbs that drift and scale on ease-in-out. Warm one top-right, cool one bottom-left. Cheap way to add depth behind a quiet hero without hero imagery.

Border color oscillates between two accent tints on a 3s ease-in-out. Perfect for an eyebrow that should catch a scanning eye without motion in position — feels 'alive' without moving.

Combines count-up 05 with Nav's `countpulse` — the number scales 6% when it lands, giving the arrival a small pop the eye catches. Reads more 'alive' than eased-only. Use for hero stats and social proof.

Cards scale from .92 to 1 with a fade — softer than a Y-lift because there's no vertical travel. Nav's default on stat tiles and score cards. Good for image grids where an upward push would shove things around.

The moment after a form submit or booking. Circle pops from scale .4 to 1, then the tick strokes in via stroke-dashoffset, then the label rises. Three staggered moves, ~1.1s total — the confirmation reads as EARNED, not instant.

One 3px border, one keyframe, rotates forever. Nav uses it on /audit while their assessment generates. Pair with a copy line ('Building your site…') and it reads as active work, not a page hang.

The product-mockup screenshot in the hero right column that gently bobs up and down. `translateY(0 → -10px)` on 7s ease-in-out, both directions. Enough to feel alive, not enough to distract from the copy on the left.

Different from ping (card 23): this pulses opacity + scale together instead of expanding a shadow ring. Softer, slower — 'live now' rather than 'just shipped'. Nav uses it on the /live seat-count chip.

Nav's brand-trust strip: infinite horizontal scroll, edges masked with a linear-gradient so logos fade in/out, individual logos come back to full color on hover, whole track pauses on hover. Swap the text nodes for `<img>` tags in real use.

Nav bar tightens up and gains a soft shadow once the page has scrolled past ~40px. Nav toggles a `.sc` class via a scroll listener. Preview loops the state every 2s so you see both. Real usage: throttle the scroll handler or use IntersectionObserver on a hero sentinel.

Nav's /faq pattern: click the row, plus icon rotates 45deg (becomes X), answer transitions its max-height open. One-at-a-time (radio-style) — opening one closes any other. max-height is the pragmatic trick: `height: auto` can't transition.

Ships-with-modern-site UX: ⌘K opens a search-first launcher, type to filter results, arrow keys to navigate, enter to jump. Use for skill libraries, product catalogs, docs. Preview auto-types a query so you see the filter kick in.

Nav's /yeg opener composed: prompt receipt card up top, ping chip, word flip-in H1 with italic accent word, sub, fill-slide CTA. Sequence: card at 0s, chip .3s, H1 words .5–.85s, sub 1.1s, CTA 1.3s. Scale the type up 40% for real hero use.

Two-column with orb-blob background: eyebrow chip + line-mask H1 with sweep highlight + sub + CTA on the left, floating dark-mode mockup on the right. Right column hides on narrow — mockup is decoration, copy is the message.

Centered layout: drifting dot-grid background, breathing chip, word-rise H1 with italic accent, stat row, logo cloud at the bottom. Reads as 'social proof at every scale.' Skip the mockup right column, let the type + logos carry it.

Mobile conversion staple: primary CTA is IN the hero, then a sticky bar slides in from the bottom once the hero exits. Nav toggles it via IntersectionObserver on the hero. In the preview it slides in after a delay to show the arrival.

Nav starts transparent over the hero and gains a white background plus a hairline shadow past a scroll threshold. Swap the spacer block for real page content; keep the threshold under 60px so the transition reads instantly.

Soft multi-color radial glow blurred behind a centered geometric mark, flanked by a left headline and a right feature list. Works for any dev-tool or infrastructure product; drop the mark for a plainer B2B SaaS hero.

Dimmed, grayscale wordmarks that sharpen to full opacity on hover. Use real client logos as SVGs rather than text once available; keep it to 5-7 marks so the row does not wrap awkwardly.

Hairline-divided 3-up grid, each cell an icon chip, short heading, one sentence, and a text link. Reads as technical/infrastructure; swap the icon glyphs for real SVGs before shipping.

Compact columns pairing a one-line capability summary with an uppercase 'Features' micro-label and a bare-bullet list underneath. Good for security or platform-capability sections; needs 3-5 columns to read as a system, not a list.

Dark editor-style card: window chrome dots, a mock file tree, and a terminal line that types a command on a loop with a blinking block caret. Good as a floating visual next to feature copy; keep the file list to 3-4 rows so it stays legible at card size.

Full-bleed near-black band pairing a headline with a solid button and a terminal-style install-command chip. Use as a mid-page break between light sections; the chip reinforces a dev-tool product without needing a screenshot.

Plain bordered quote cards with an initials avatar, name, and role. Keep quotes under two sentences and specific to a metric or outcome, generic praise reads as filler.

Borderless-feeling grid made from shared hairlines rather than boxed cards, six small use-case cells. Scales to any even number of cells; drop to a 2-column layout under 720px.

Three flat pricing cards with the middle tier raised by a border, shadow, and a floating 'Most popular' tag. Keep feature lists to 3-5 lines per tier so the cards stay the same visual weight.

Long-form feature comparison table grouped by category rows, with checkmark or dash cells per plan. Pair with the pricing-tier cards above the fold; this table is for the buyer who scrolls to verify a specific line item.

A small mocked product screenshot (chat bubble, notification, or status row) sits inside a card above the real heading and description. Use this to make an abstract feature feel concrete without a real screenshot; swap the mock content per feature.

Standard five-column footer, mark plus four link groups, with a bottom bar for copyright and social links. Collapses to two columns under 720px; keep each group to 3-4 links max.

A faint pixel grid faded out via a radial mask so it reads at the edges but disappears behind the centered content. Drop this behind any hero or section divider; adjust background-size to change grid density.

A blurred two-tone gradient sits offscreen inside each card and fades in on hover using mix-blend-mode. Subtle at low opacity; push past .5 and it starts looking like a colored highlight instead of a glow.