First CH Designs
JA

Design Gallery

Good UI, in a reproducible form.

UI designs from First CH's production work, stocked with source code and an AI Script. Copy one straight into your next project.

69 designs

ACC-01

FAQ Accordion

A question-and-answer disclosure list built on native <details> — no JavaScript. The plus mark rotates 45° into a cross when open.

Elements
BDG-01

Status Badge

Badges for showing state in dashboards and lists — soft tinted background plus a dot, in four states.

Elements
BTN-01

Standard Buttons

The three baseline buttons for white-background sites: primary (amber), secondary (outlined), and text — three levels of emphasis.

Elements
BTN-02

Press-Depth 3D Button System

A tactile button family with real thickness and squircle corners: pressing sinks only the face. Three tones, three sizes, icon and icon-only shapes, a toggle, a disabled state, and a stepper all follow one rule (press depth = thickness − 2px). Motion is transform-only, and pressed, toggled-on, and disabled share the same sunken face.

Elements
CRD-01

Feature Card

A link card for service or feature lists: heading, description, and an arrow link. On hover an amber rule grows across the top and the card lifts slightly.

Elements
INP-01

Text Field

The baseline form input for contact forms — normal and error states, with label, helper text, and error message.

Elements
TYP-01

Section Heading

A heading set for the top of page sections: uppercase eyebrow, heading, lead paragraph, and a short amber rule.

Typography
TYP-02

Typed & Glitch Headline

A headline whose typing speed, glitch length, and noise charset are declared as data attributes on the markup itself. The engine re-reads data-typed-* from the host element every frame instead of taking props, so rewriting an attribute at runtime takes effect immediately and the same engine ports to plain HTML and vanilla JS unchanged. Attribute values are treated as untrusted input and clamped on read. To keep the box from jumping while characters are typed and deleted, an invisible sizer holding the longest phrase is stacked in the same inline-grid cell as the live line, and the default noise charset is full-width kana so glyph advance matches the Japanese copy. Under prefers-reduced-motion the animation is not merely stopped but downgraded to the finished text, and the animated span is aria-hidden with the full copy exposed separately via sr-only. Zero dependencies.

Typography
TYP-03

Wind-Blown Headline

A headline split into per-character cells, with each cell offset by a slightly different animation-delay on the same keyframes so the sway travels across the line like a passing gust. A horizontal sway and a vertical lift are layered at durations that do not divide evenly (3.7s / 5.3s) with different per-character delay steps (0.09s / 0.13s), so the phases never re-align and the loop stops reading as a loop. Amplitude is distributed as a per-character custom property, keeping a single set of keyframes while allowing a flag-like ramp where the left edge is anchored and motion grows toward the right. Splitting happens at render time (swapping the DOM afterwards re-flows the line the moment the cells become inline-block), and only transform is animated, so line spacing and neighbouring elements never move. The one real pitfall of per-character inline-block — changed line-break opportunities — is handled by keeping Latin words in a single cell and absorbing punctuation that must not start a line into the preceding cell. Gusts run as a one-shot animation on a separate layer, and no randomness is used during render. Zero dependencies; downgrades to a still headline under prefers-reduced-motion.

Typography
BLK-01

CTA Banner

A call-to-action block for the bottom of a page: soft amber gradient panel with eyebrow, heading, and two buttons. A section-level specimen, not a component.

Blocks
BLK-02

Pricing Plans

A three-tier pricing block. Only the recommended middle plan gets an amber border, ring, and filled button — for LPs and service pages.

Blocks
BLK-03

Process Steps

Numbered process steps for content where order matters, like a production flow. Circled numbers connected by a hairline, laid out horizontally on desktop.

Blocks
BLK-04

Service Zigzag (Card-less)

A card-less editorial take on a services / features section: instead of a 3-up card grid, entries stack vertically as full-width bands that alternate left/right (zigzag). Each row swaps a dotted 'plate' panel (with an oversized outlined index numeral) and un-boxed text via CSS grid order, grouped by hairline rules and generous whitespace. Zero image assets; amber rules and Montserrat display numerals give it a specimen-like editorial feel.

Blocks
BLK-05

Strengths — Declarative Stats

A declarative strengths/stats block that lets numbers do the talking. One KPI is placed as a dominant feature stat in giant type, with three supporting stats grouped by hairline rules below (few claims, clear hierarchy). Numbers count up from 0 via requestAnimationFrame once the section scrolls into view (IntersectionObserver), with tabular-nums to keep digit widths fixed and avoid jitter. Grouped with rules and negative space instead of cards — zero image assets. Reduced-motion users see final values instantly.

Blocks
BLK-06

Works — Case-study Grid

A works / case-study index block with high information density. Instead of a row of shadowed cards, entries sit in a hairline 'ledger' (gap-px on a gray fill), each with a faux logo lockup (monogram + wordmark, zero images), an industry tag, and a giant ghost index numeral for rhythm. On hover (and keyboard focus) the excerpt fades in and the arrow slides; the excerpt's height is always reserved so nothing reflows. An industry filter toggles cells via hidden (no reflow animation) and announces the count via aria-live. Staggered reveal on scroll-in via IntersectionObserver, instant final state under prefers-reduced-motion.

Blocks
BLK-07

Customer Voices — Quote-led Ledger

A testimonials block that leads with the quote and subordinates the attribution. One voice is placed as a dominant blockquote in large type, with the name/attribute added quietly beside an amber hairline. The remaining voices are grouped — not as cards — into a 'voice ledger' bound by a single vertical rail and divide rules. Instead of relying on Swiper, a shared keyframe is applied to each testimonial's rail marker with a staggered animation-delay, so a blinking highlight travels down the list in pure CSS (markers are anchored per row, so alignment holds even with variable row heights). Names follow the restrained style of medical sites (initials, age band, attribute) to avoid over-identifying individuals. Zero image assets; reduced-motion falls back to static markers and instant reveal.

Blocks
BLK-08

Global Site Header

A corporate global header: logo left, nav right, and exactly one CTA pinned to the far right behind a vertical hairline so the hierarchy is unmistakable. On scroll a blurred white backdrop fades in and a bottom hairline wipes in from the left — no height or padding changes, so nothing reflows. On mobile a hamburger opens a full-screen overlay (Escape to close, inert while hidden). Includes a skip link; zero image assets. Ships with a scrollable demo shell so the scroll state is visible inside the gallery.

Blocks
BLK-09

Site Footer

A three-tier corporate footer organised by hairlines alone — no panels, no cards, no background fills, so the end of the page never outweighs the CTA above it. Tier one is the sitemap (services / company / legal); the divide flips from horizontal rules on mobile to vertical column rules on desktop from a single DOM. Tier two restates the logo small — wordmark only, so it does not duplicate the header — next to a one-line address and contact details. Tier three carries the copyright and a back-to-top control. An amber tick wipes in once on the top rule via IntersectionObserver; link hovers are a 2px nudge plus an underline scale-x. Zero image assets.

Blocks
BLK-10

Split-Band CTA

A wide horizontal CTA band to drop into the flow of a page: Japanese label, heading and a short lead on the left, primary/secondary buttons on the right, split by a single hairline rule rather than two boxes. The faint amber wash (bg-amber-50/60) is applied only to the action column so colour marks function, not decoration. The rule-based counterpart to cta-banner (BLK-01), which is a centred gradient panel. Zero image assets.

Blocks
BLK-11
Blocks
BLK-12
Blocks
BLK-13

Interactive Card & Tab Module

A tabbed overlap-accordion: opening a panel folds its neighbours down to a thin spine. Every panel is absolutely positioned at its expanded size with ascending z-index, so open/close animates translate only — no width or flex-grow transitions, no layout recalculation, no dependencies. Offsets are expressed as ratios in calc(), so neither ResizeObserver nor matchMedia is needed, and the vertical/horizontal switch is pure CSS via container queries. Rebuilt from scratch in the First CH brand; only the idea (card expansion + tab switching) is borrowed from the reference pen.

Blocks
BLK-14

Recruit Section with Hand-drawn Accents

A recruiting section that conveys "people" through soft amber color fields and hand-drawn SVG accents (wobbly underline, rough ring, arrow doodle). Faces are replaced by initial circles, paired with a dashed-frame job outline panel and a two-tier CTA. Zero image assets, zero dependencies, transform/opacity-only motion.

Blocks
BLK-15

Featured Work — Stacked Screens

A works block that drills into a single recent project instead of listing many. On the left, three screen captures stack with slight offsets (zero image assets — browser chrome plus wireframes drawn in markup) and fan open on hover. On the right, a client lockup and a hairline spec list. Below, a vertical ledger reads issue → approach → result, with three metrics attached only to the result row. No category filter: this is the counterpart to the grid index (BLK-06 work-grid). Depth comes purely from translate/rotate/scale so nothing reflows, and every motion — including the IntersectionObserver staggered reveal — collapses to its final state under prefers-reduced-motion.

Blocks
BLK-16

Strengths — Asymmetric Grid

A strengths block that lists several reasons without falling back to an even grid. On a 12-column track the heading:body ratio rotates 7:5 → 5:5 (indented by one column) → 4:7 → 7:5, stepping the left edge so that hairline rules alone create rhythm. A vertical Latin mini-label stands in the left gutter, and the rail below it doubles as the list's left boundary — a compositional role, not decoration (it flips back to horizontal at 375px). Because reasons carry no inherent order, there are no 01/02 numeric markers; short Japanese kickers characterise each row instead. Grouped with hairline rules and negative space rather than cards, with rules drawn in via an origin-left scale-x wipe. Zero images, zero dependencies. A deliberate counterpart to strength-stat (BLK-05), which instead blows up a single KPI.

Blocks
BLK-17
Blocks
BLK-18

Customer Voices — Stacked Polaroids

A testimonials block that presents each voice as a printed photo laid on a desk. White-framed, shadowed cards each get their own tilt (-3.4° to +2.9°) and are offset and overlapped with an explicit stacking order. The difference from the aligned ledger of testimonial-voices (BLK-07) is precisely the absence of alignment: this one carries warmth and a handmade feel. No face photos — the print window holds an initial badge and the quote itself, while the thick bottom border carries a handwritten-style signature (Yomogi) over an amber pen stroke. Because the resting pose is itself a transform, reveal and hover would collide on one element; it is solved by splitting into two layers (outer li = translate-y/opacity, inner = rotate) plus a keyframe with animation-fill-mode: backwards whose final keyframe equals the resting pose. Tilted text is harder to read, so each card is focusable (tabIndex=0) and straightens on hover/focus-visible. Zero image assets; reduced motion falls back to instant display.

Blocks
BLK-19

Access & Directions (Map + Landmark Thumbnails)

An access block that switches between arrival modes (train / bus / car) with ARIA tabs, draws the route and numbered pins on an inline-SVG schematic map, and lists landmark thumbnails — "the view you should be seeing" — beside it. It reworks the tourism-site idea of grouping places into categories and arranging photo thumbnails map-like into corporate wayfinding. Hovering or focusing a landmark highlights its pin; the route flows by staggering dot opacity with negative animation delays. No map API, no image assets, zero dependencies.

Blocks
BLK-20

3D Tilt & Parallax Hover Cards

A works section laid out as a hairline-ruled ledger where only the hovered entry tilts toward the cursor and lifts off the sheet. Pointer values are written straight into CSS custom properties (--tx/--ty/--px/--py) instead of React state, so tracking causes zero re-renders; the bounding rect is measured once on pointerenter and re-measured only on scroll. Rotation, per-layer parallax via translateZ, and the moving sheen are expressed purely with transform and opacity, and the 90ms follow / 650ms release time constants are swapped through a CSS variable. No dependencies. The effect is wired up only for fine pointers without prefers-reduced-motion; keyboard users get a focus-within rule and arrow instead of the tilt.

Blocks
BLK-21

News & Updates — Hairline List

A news list that packs each entry into one line — date, category tag, title, arrow — separated by hairline rules alone. With no cards (no fills, shadows or radii), the visual noise of borders never accumulates as the list grows. Because news carries no inherent order there are no 01/02 markers; a <time> date and a category tag identify each row instead. On mobile the date and tag share one line, while md: uses display:contents to dissolve the wrapper and promote its children straight into the grid — one DOM, two layouts. Hover is limited to two things: an origin-flipping underline wipe on the title and a 2px arrow nudge; nothing changes fill. The category filter is likewise fill-free — text buttons with an underline, state exposed via aria-pressed and an sr-only aria-live count. Zero images, zero dependencies.

Blocks
BLK-22

Tabbed Split-Text Transition

A tabbed block where the copy itself is what changes: the current characters exit upward and the next ones rise out of the line below. It drops GSAP/SplitText's DOM measurement by treating lines as data (string[]), so the line-mask + per-character stagger works in plain CSS with zero dependencies. Splitting happens at two granularities — graphemes via Array.from for the short headline (never .split(""), which breaks surrogate pairs), and punctuation-inclusive phrase chunks for the flowing body, because per-character inline-blocks let Japanese lines break before a full stop. Entering characters mount fresh, so transitions would not fire; keyframes with fill-mode: both play on mount, while the exit simply swaps the class so the animation-name changes and replays. Reduced motion is collapsed with a scoped @media animation: none !important and by skipping the exit phase in JS. Only the idea is borrowed from the reference pen.

Blocks
BLK-23

Client & Press Logo Marquee

A two-lane infinite logo strip for client and press mentions. No logo images: each fictional wordmark varies in weight, tracking, size and leading glyph, mixing Japanese and Latin type so the row reads as logos rather than a list. The lanes run in opposite directions at different speeds (42s/52s), both edges are cut with mask-image, and hovering pauses the lane. Under prefers-reduced-motion the whole marquee is dropped and the same names are shown as a static hairline grid.

Blocks
BLK-24

Cursor-Trail Strand Canvas (with parameter panel)

A drawing block that turns the cursor trail into a rope of evenly spaced nodes on Canvas 2D, then lets gravity, curl noise and distance constraints drop and pile it up. The First CH wordmark is rendered offscreen and thresholded into a 0/1 alpha mask, so strands bounce off the letterforms and only the contact points light up in amber (#d97706). Pressure, gravity and curl sliders plus clear / auto-draw toggles sit in a hairline-ruled panel rather than a row of cards. The live strand is amber and fades to ink over 900ms once it settles. The rAF loop stops on three conditions — prefers-reduced-motion, off-screen (IntersectionObserver) and hidden tab — and under reduced motion the same physics is run synchronously to paint a single settled frame, so the sliders still recompute the result instead of going dead. After a pause a Lissajous virtual pointer takes over so the effect reads on touch devices too. No dependencies, no image assets. Only the idea (strands from a cursor trail, plus a pressure/gravity/curl parameter panel) is borrowed from the reference pen; all code, copy, colour, composition and the wordmark are original.

Blocks
BLK-25

History Timeline (Hairline)

A company-history timeline drawn with a single hairline rail and year nodes. An IntersectionObserver reveals each entry once, in order: the line draws down, a thin concentric ring node appears, then the year and copy rise into place. Grouped with hairlines and negative space instead of cards — no images, no dependencies. Years and events are fictional placeholders.

Blocks
BLK-26

Member Grid (Collage Portraits)

A team roster that introduces members without a single photograph. Each person is a four-layer paper collage — a halftone dot patch, a hairline frame, an initials disc and a tilted caption strip — that fans open on hover and focus-within. Grouped with a single rule and negative space instead of cards, revealed once in sequence via IntersectionObserver. No images, no dependencies; people, roles and quotes are fictional placeholders.

Blocks
BLK-27

Directory Mega Footer

A footer whose sheer volume of links is the point. Four business-unit columns are bound together by a left rail — a vertical Japanese index label plus a hairline axis — so the eye keeps a fixed starting point as the columns multiply. The dividers flip from stacked horizontal rules on mobile to vertical column rules on desktop from a single DOM (divide-x is avoided because it leaks a rule onto the first cell of a wrapped row). On mobile each column collapses behind an aria-expanded toggle, so a long sitemap never stretches the page end. Link hover slides a zero-width amber rule in front of the label with transform only, leaving layout untouched. Entrance is a single scale-y on the axis plus a column stagger. Zero image assets.

Blocks
BLK-28

Service — Stacked Info Cards over a Tall Visual

A services block that stacks explanation cards onto a single tall visual instead of listing them as a 3-up card grid. Each card shifts its horizontal offset, width, and overlap with the previous one; depth comes from static z-index and transform only, so nothing reflows. The left visual is built from a gradient plane, a hairline ring, a diagonal band, a blurred disc, and a dot grid — zero image assets — and fixes the frame so a real photo can drop in later without touching the layout. From lg up the visual sticks while the cards scroll past. Use it when a project has only one or two photos, as the counterpart to the alternating layout (BLK-04) and the card grid (CRD-01). Every motion, including the IntersectionObserver stagger, collapses to its final state under prefers-reduced-motion.

Blocks
BLK-29

Plane Gallery (WebGL camera travel, zero dependencies)

A works section built as six textured planes arranged on an arc, toured by moving the camera's look-at target. No 3D library: a projection matrix, a lookAt view matrix and a per-plane model matrix are assembled in JS and handed to plain WebGL (GLSL ES 1.00). A single four-vertex TRIANGLE_STRIP is reused for every plane — only the uniforms (MVP, artwork index, facing factor, emphasis) change between the six draw calls, so neither buffers nor textures grow. The artwork on each plane is drawn procedurally in the fragment shader instead of sampled from an image, so the block ships with zero image assets. Hit testing casts no rays: the four corners are projected to screen space with the very matrix already used for drawing and tested with a polygon inside test, discarding only planes behind the camera. Hovering a plane pulls it toward the viewer along its own normal and highlights the matching row in the hairline-ruled ledger below; hovering or focusing a row turns the camera to face that plane, so keyboard users get the same experience and the canvas can stay aria-hidden while the list remains the source of truth. Idle panning reverses at the ends of the arc, so the loop has no visible seam. Under prefers-reduced-motion no animation frame is scheduled: the arc becomes a static 3x2 grid painted once, with emphasis shown only as an amber hairline frame. Rendering also stops off-screen and on hidden tabs, and if the mean frame time over the first 48 frames exceeds 32ms the backing store drops to 0.6x before falling back to a static CSS gradient. webglcontextlost is always caught with preventDefault, and unmounting releases GPU resources via WEBGL_lose_context.

Blocks
BLK-30

Frosted Glass 3D Hover Cards

A works block that builds depth from three stacked layers: a frosted pane, a specular rim, and content floating above it. The light source belongs to the group rather than to each card — a single pointermove on the parent drives per-card local coordinates every frame, so even cards the cursor is not over light up along the edge facing it. Only the hovered card derives rotateX/rotateY from the pointer, and every value including the 90ms follow / 650ms release time constants is swapped through CSS custom properties (--lx/--ly/--near/--tx/--ty/--lift/--tilt-ms), so React never re-renders. Because a translucent pane over white reads as nothing, diagonal bands and amber blobs sit behind the glass to give the blur something to work on (the pattern has to be coarser than the blur radius), translating dark-mode neon edges into light-mode specular highlights. No dependencies; wired up only for fine pointers without prefers-reduced-motion, with a focus-within rim and arrow for keyboard users.

Blocks
BLK-31

Works — Asymmetric Showcase Grid

A works index that borrows the grid split and information hierarchy of an online-shop product listing and re-targets it at case studies. In a three-column grid the first entry alone spans 2×2 while five smaller cells fill the remaining slots, so a 3×3 field is exactly filled. Each cell has an image-free plate (project type + specimen number lockup) instead of a thumbnail, a status label where a NEW/SALE badge would sit, a before→after KPI with a change chip where the price would sit, and filled/outlined dots for the phases we handled where colour swatches would sit. Sorting (newest / impact) swaps which entry occupies the 2×2 hero slot. Breakpoints are container queries, not viewport ones, so the layout holds inside narrow embeds. One stretched link per cell (no nested anchors); motion is transform/opacity only and fully degraded under prefers-reduced-motion.

Blocks
BLK-32

Works Carousel — Horizontal Scroll with Layered Parallax

A works/case-study carousel built entirely on native scroll snapping — no animation library. The track is overflow-x-auto with snap-x snap-mandatory, so dragging, swiping, wheel scrolling and keyboard focus traversal come for free; JS only reads the current position and calls scrollTo, leaving easing to CSS scroll-behavior so prefers-reduced-motion degrades to instant jumps automatically. Inside each slide a single CSS variable (--p), derived from scroll position, is read by four layers (grain, amber shape, ghost number, type lockup) with different coefficients, and the difference in travel produces the parallax depth — no React state, no re-renders. Autoplay reverses direction at the ends instead of rewinding, and stops on the pause button, off-screen, pointer/focus dwell, hidden tab, or reduced motion. Zero image assets, zero dependencies, one stretched link per slide (no nested anchors).

Blocks
BLK-33

Pricing Comparison Matrix

A pricing block that presents plans against features in a single table. The recommended column is highlighted as a continuous pale amber pillar with a badge, while supported items use a hairline check and unsupported ones a soft dash to keep the overall density even. Figures use tabular numerals, and on narrow screens the feature column stays sticky while the plans scroll horizontally.

Blocks
BLK-34

Process Steps with Sticky Heading

A production-flow block that keeps the heading sticky on the left while each step on the right activates as you read. A vertical progress hairline grows with scroll and lights up each marker as it reaches it. Where supported it runs purely on CSS scroll-driven animations (view-timeline) with zero JavaScript, falling back to a rAF loop that writes the same custom properties.

Blocks
BLK-35

FAQ with Category Tabs & Two Columns

An FAQ block whose questions are filtered by category tabs (pricing, process, after delivery). Disclosure stays on native <details>/<summary>; the tablist implements roving tabindex with arrow-key navigation. On wider containers the list splits into two independent columns so opening one answer never reflows the other column. Count badges use Montserrat with tabular numerals.

Blocks
BLK-36

Six-Faced Cube Service Switcher

A service block that puts six offerings on the six faces of a single cube; picking one spins the cube along the shortest path to bring that face forward. Every face is the same square pushed out along its own normal with `<rotation> translateZ(calc(var(--cube)/2))`, and the edge length lives in one CSS custom property so the box never stops being a box across breakpoints. Angles are accumulated as continuous values rather than wrapped to 0–360 — each target is snapped to the equivalent angle nearest the current one — so going from the fifth face back to the first never takes the long way around. A second preserve-3d wrapper holds a fixed rotateX(-9deg) rotateY(-15deg) attitude so two adjacent faces stay visible and the shape reads as a solid, keeping "which face is front" and "how the box sits" as separate rotations. Shading is driven by whether a face is front-facing rather than baked per face, so the front is always the lit one. The interaction is a plain vertical tablist with roving tabindex and arrow/Home/End keys; non-front faces are inert. Under prefers-reduced-motion the 3D is dropped for a flat panel swap. No dependencies, no image assets.

Blocks
BLK-37

News — Featured Pickup with Category Tabs

A news block that introduces hierarchy: the single latest entry is featured on the left (date, hairline category badge, large headline, excerpt, text CTA) while the rest collapse into a hairline list on the right. The difference is carried by type scale and whitespace alone — no fills, no cards — so the layout holds up with zero image assets. A single vertical rule divides the two columns and swaps to a horizontal rule when it folds to one column: same DOM, different divider. Filtering is a real tab UI (role="tablist" with roving tabindex, arrow/Home/End keys) and switching a tab also swaps the featured item. Panels remount via a changing key so a CSS animation always replays from the top, with rows staggered 55ms apart. Dates are set in tabular Latin numerals with the year dimmed; categories are outline-only badges. Empty and single-item states are designed in, so no hollow rules are left behind. Zero images, zero dependencies.

Blocks
BLK-38

Before / After Compare Slider

Two versions of the same layout stacked at identical coordinates, compared by dragging a divider. The top layer is cut with clip-path rather than resized, so nothing re-flows and line breaks never shift — the usual width-based implementation re-wraps the text and stops reading as the same page. The divider position is written straight into a CSS custom property on every pointermove while React state is throttled with rAF and used only for the announced value, so the divider never lags the pointer by a render. The key detail is that the inline style seed is a constant rather than state-derived: React then leaves the attribute alone and the direct writes survive. Pointer capture keeps the drag alive outside the frame, and touch-action: pan-y preserves vertical scrolling on narrow screens. The BEFORE badge lives inside the clipped layer so it disappears on its own, removing one piece of state. The handle is a role="slider" with arrow (2%), PageUp/Down (10%) and Home/End keys. Both faces are built from DOM — no images, no dependencies. The divider sweeps once on first view to signal that it is draggable, and stays put under prefers-reduced-motion.

Blocks
BLK-39

Company by the Numbers — Hairline Grid

A "by the numbers" block for company and recruiting pages. Founding year, project count, retention rate and more sit as equals in a lattice bound by 1px rules alone — no cards. The parent uses grid gap-px on a gray background with white cells, so the gaps themselves become the rules and no doubled lines appear when the column count changes. Numbers are oversized Montserrat with tabular-nums; units and captions stay subordinate. Values count up from 0 via requestAnimationFrame once the section enters the viewport, and the same eased progress drives the scaleX of an amber measure bar so digits and rule grow on one timeline. Columns reflow with container queries (@md/@2xl), so the block holds up inside narrow containers. Zero image assets; reduced-motion users see final values instantly.

Blocks
BLK-40

Folding-Panel Carousel

A horizontal carousel where each panel folds around its own vanishing point. Placing perspective on every slide box instead of the track means each panel rotates about its own centre, so no trapezoidal distortion appears and the row reads as a folding screen rather than a perspective corridor. Because no shared 3D context exists, the stage can simply use overflow-hidden (which would flatten preserve-3d), at the cost of paint order: z-index has to be distributed by distance from the centre. Travel is expressed as a percentage — a flex w-fit track is exactly one panel wide times N, so translateX(-active * 100/N %) advances one panel and no dimension is ever measured, even when the panel width changes per breakpoint. Panels rotated past ±90° are removed by backface-visibility, so the number of visible panels falls out of the fold angle itself. Angle and scale are passed as CSS custom properties while the transform lives in a class, since an inline-style transform outranks media queries and would break the reduced-motion fallback. Only transform and opacity animate; zero dependencies; under prefers-reduced-motion it degrades to a plain flat filmstrip.

Blocks
BLK-41

Message from the President — Vertical Accent Editorial

A president's-message block for company pages. No portrait, no badges: the composition rests on the contrast between a single vertical-writing headline and a two-column horizontal body. Line breaks in the vertical headline are fixed by rendering one line per element in a flex-row-reverse row rather than letting the browser wrap on height, which also allows per-line indents. Emphasis comes from Japanese sesame dots (text-emphasis) in amber instead of colour or bold, and half-width digits stand upright via text-combine-upright. The body flows through CSS multi-column with a hairline column rule and collapses to one column in narrow containers. Motion is limited to a scroll-like vertical mask reveal and rule scaling — transform and opacity only. No rounded corners, no uppercase kicker, no trailing arrow link; it closes on a title and signature.

Blocks
BLK-42

Depth-Parallax Keyword Wall

A band of keywords drifting endlessly across five layers, each at a different speed. No canvas or WebGL: plain DOM nodes moved with translate3d, so the words stay selectable text and the two front layers are keyboard-reachable buttons. The infinite loop comes from a modulo over lane length rather than spawning and disposing sprites, and leftover space is divided evenly across the items. Drag or horizontal wheel to change the throw and the direction (vertical wheel passes through to the page); selecting a word halts the drift and reveals its note. Under prefers-reduced-motion the same words render as a static hairline grid. Zero dependencies.

Blocks
BLK-43
Blocks
BLK-44

Reasons to Choose ③ — Us vs. Other Options

A comparison block that places your own offer beside the other options a client is weighing. Instead of a grid of checks and crosses, each row pits one short sentence against another so the difference is argued in words. The counterpart is switched one at a time through a chip group (radiogroup with arrow-key support), so even narrow screens read straight down with no horizontal swipe and no sticky column. The "us" column is given the wider span on a 12-column track and a pale amber pillar drawn by a single band overlaid on the same grid — the tint is always painted and only a hairline rule scales up, so nothing depends on JS. The closing row states where each option actually fits, with a note that the comparison describes types of setup rather than any specific company. Zero images, zero dependencies.

Blocks
BLK-45

Pain Checklist → Solution Bridge

A problem-statement block that turns the usual pain list into a real checklist — hairline rules and square checkboxes instead of cards. The list is not just readable but selectable: tick the pains that apply and the amber band below keeps only the matching remedies (with nothing ticked it drops the filter and shows all, so the band is never empty). Empathy and resolution are joined by a single hairline that scales down from its top edge into a rotate-45 arrowhead. Only one surface changes temperature — bg-amber-50/70 with border-amber-600/25 on the band, while the list stays white. Count changes are announced through one aria-live="polite" line rather than a live list. No radii, no uppercase kicker, no trailing arrow links. Zero images, zero dependencies.

Blocks
BLK-46

Certification & Award Badge Band

A trust band that presents certifications, standards conformance and awards as typographic specimen badges — no logo images at all. Six entries run in ascending order of the year obtained, bound by gap-px hairlines instead of cards. Each badge sets a Latin lockup inside a thin frame with amber corner ticks and aligns the year in tabular-nums along the bottom edge. Hover or keyboard focus opens a one-line tooltip whose left offset is clamped inside the band by measuring the band, cell and tooltip rects, so edge columns never overflow (only the caret keeps pointing at the cell centre). The spoken description lives permanently in an sr-only span inside each button rather than a toggled aria-describedby. Below the band, a year scale rail carries a marker that moves with translateX(%) alone. All entries are display samples.

Blocks
BLK-47

Document Download CTA (CSS Cover Mock + Single-Field Form)

A lead-magnet CTA that shows the thing being offered instead of relying on copy and a button alone. The cover is a CSS-only 3D mock — a cover face, an inner stack of sheets and a spine plane standing on a perspective / preserve-3d stage — that straightens on reveal and turns further to the front on hover, with zero image assets. On the right sit an excerpt of the table of contents (chapter number, title, dotted leader rule, page number) and a form with a single field. The top strip carries the document's format (PDF, 24 pages, free) as practical information rather than a Latin kicker. No rounded corners anywhere: everything is bound by hairline rules and spacing. Submitting swaps in a completion panel that catches focus, and sending again returns focus to the input. All entries are display samples.

Blocks
BLK-48

Blog Digest — Editorial List

An article list built around estimated reading time. Each row opens with an oversized Latin numeral for the minutes, with a bar beneath whose length is fixed as a ratio to the longest piece — so readers can compare weight at a glance without a single thumbnail. The numeral encodes quantity, not sequence, so it never reads as a step marker the way 01/02 does. Sorting offers newest-first and shortest-first; because sorting never changes the count, an sr-only aria-live announces the new order rather than a number of results. Categories are separated by text colour and a hairline rule instead of outlined badges, and rows carry no fills, shadows or radii at all. Hover moves only two things: an origin-flipping underline wipe on the headline and an opacity overlay on the bar — the bar length never changes, so interaction never distorts the data. No arrow links, no Latin kicker, no rounded corners. Zero images, zero dependencies.

Blocks
BLK-49

Seminar Schedule — Date-Block List

An event schedule list anchored by an oversized tabular month/day block on the left edge. Each row carries seat inventory: the capacity state (open / few left / full / closed) drives a tick-mark seat gauge, the application deadline, and whether the row is actionable at all. Full and past sessions are marked with a tilted stamp instead of a card, and past sessions are toggled with a switch. No rounded corners, no uppercase kicker, no arrow links — months are grouped with hairline rules and whitespace alone. Image-free, dependency-free.

Blocks
BLK-50

Office & Store Directory (Hairline Ledger)

A multi-location directory rendered as a single hairline ledger. Name, address, phone and opening hours share the same columns; rhythm comes only from crossing horizontal and vertical rules — no rounded corners, shadows or filled surfaces. Each row derives its live status (open / closing soon / closed today) from the visitor's clock, and two controls (area filter, open-now toggle) narrow the list. Phone numbers are tel: links set in tabular figures; map links stay as thin text links. No image assets required.

Blocks
BLK-51

Service Coverage Area (Simplified Map + Area List)

A service-area block that answers "is my address covered?" rather than "where is your office?". Instead of a real map it draws a hand-built SVG district diagram from a jittered shared lattice, shading four coverage tiers in amber, with a municipality ledger (reading, travel fee, earliest visit, conditions) beside it. A single search box filters diagram and list together, hover/focus cross-highlights both, and the shading spreads outward from the base location. Zero images, zero dependencies.

Blocks
BLK-52

Phone-First CTA Band (Tap-to-Call)

A CTA band that makes the telephone the primary path. The largest type is neither the heading nor a button but the number itself, and that number is the tel: tap target: one anchor that renders as a full-width amber bar on narrow screens and reverts to plain oversized type with a hover underline from sm up. A status line at the top derives open/closed (and the next opening time) from the current clock, while the right column holds a weekday/Saturday/Sunday hours table with today's row marked. Free-call notes stay secondary; email and callback links drop to thin underlined text. No rounded corners, no Latin kicker, no trailing arrows — hairline rules and spacing do the binding. All numbers and hours are display samples.

Blocks
BLK-53

Availability-Grid Booking CTA

A booking CTA built as a two-step path: the star is neither the copy nor the button but the inventory itself. A matrix puts the next seven dates across the columns and morning/afternoon/evening down the rows, filled with availability marks (open / few left / full / closed), with a legend ahead of the table so the glyphs read. Only bookable slots are buttons; full slots are disabled and drop out of the tab order. Picking a slot scales an amber tile into the cell, rules the column header in amber, spells the date, weekday and time band out in the summary bar, and only then activates the previously greyed-out confirm button. A this-week / next-week toggle sits at the top, and dates are painted after mount so hydration never mismatches. No rounded corners, no Latin kicker, no arrow links — hairline rules and spacing do the binding. All dates and availability are display samples.

Blocks
PGE-01

Split Hero

A corporate-site hero: copy, two CTAs, and stats on the left; a pure-CSS browser-window site preview on the right. No image assets required.

Pages
PGE-02
Pages
PGE-03

Full-bleed Visual Hero

A full-bleed hero whose key visual is split into a 4x3 tile grid that lands back into one seamless photograph. A white scrim keeps Japanese copy legible, and a hairline rule groups the summary items instead of cards. The reveal is pure CSS @keyframes with animation-fill-mode: backwards, so it needs no JS and falls back to the finished state on SSR and under reduced motion. Swap the text-free background KV via the imageSrc prop.

Pages
PGE-04

Canvas Particle Hero (Grid + Spring Physics)

A hero whose Canvas 2D particles sit on a measured grid rather than at random: the pointer repels them and a spring with damping pulls them home, so order dissolves and reforms in a way that echoes the gallery's dotted specimen grid. Particles near the pointer shift to amber (#d97706). Velocity and damping are normalised by delta time so 120Hz displays don't run double speed, and the rAF loop stops on three conditions — prefers-reduced-motion, off-screen (IntersectionObserver) and hidden tab. After a pause, a Lissajous virtual pointer takes over so the effect still reads on touch devices. No dependencies, no image assets. Only the idea (canvas particles + pointer physics) is borrowed from the reference pen; all code, copy, colour and composition are original.

Pages
PGE-05

Liquid Glass Hero Background (WebGL refraction + melt)

A hero whose background is a single full-screen triangle rendered by one fragment shader: blobs of refracting glass over the gallery's dotted specimen grid. No 3D library — plain WebGL with GLSL ES 1.00, so the same shader runs on both webgl2 and webgl contexts and the dependency list stays empty. The grid and the amber diagonal band are drawn procedurally inside the shader rather than sampled from a texture, and refraction is simply re-sampling that function offset along the surface normal, with chromatic dispersion at 1.035 / 1.00 / 0.965 per channel. The blobs are circle SDFs combined with a polynomial smooth-minimum, so they neck and melt into one another as they approach, and modulating the viscosity over time makes the field breathe. The pointer acts as a sixth blob; after a pause a Lissajous virtual pointer takes over so the effect reads on touch devices. Low-end hardware is handled by a two-step resolution drop — if the mean frame time over the first 48 frames exceeds 32ms the backing store falls to 0.6x, and if it still does the loop stops and a static CSS gradient takes its place. Under prefers-reduced-motion the same shader paints one frozen frame instead of animating, and rendering also stops off-screen (IntersectionObserver) and on hidden tabs. webglcontextlost is always caught with preventDefault, and unmounting releases the GPU resources via WEBGL_lose_context. All copy, colour and composition are original; no image assets.

Pages
PGE-06

3D Object Gallery Hero (PBR, IBL, shadows)

A hero for projects that ask for real-time 3D on the web. Three specimens — polished metal, glazed ceramic and cast glass — can be swapped to show material work, yet the block ships no model files and no texture images: the shapes are generated in code with TorusKnot, Lathe (the vessel profile comes from a function) and Extrude (rounded shape with a bevel). Reflections come from a studio built in code — a white box with four emissive panels — folded into an environment map by PMREMGenerator.fromScene(), so PBR reflections read as real area lights without loading an HDRI, and the amber back panel tints the highlights on brand. Three lights are used: a shadow-casting directional key with PCF shadows, an amber point light for the rim, and a hemisphere fill. The only shadow catcher is a ShadowMaterial floor, which keeps the white page clean while grounding the object. Entrance, exit and float are driven by an AnimationMixer: keyframe tracks such as VectorKeyframeTrack('.scale') are assembled by hand, so a timeline is available even without an animated model. The specimen switcher lives in the hairline ledger below the canvas as real buttons with aria-pressed, so everything is reachable by keyboard. Adding three is the single exception to this gallery's zero-dependency rule, taken only because PBR materials, environment maps, shadows and animation are not worth hand-writing in raw WebGL; anything raw WebGL covers well (planes, shader backdrops, particles) stays dependency-free elsewhere. The measured cost of the exception (three 0.185, production build) is one extra chunk of 725,217 bytes (~708KB), 181,641 bytes (~177KB) gzipped, and it is never imported statically: a dynamic import inside useEffect splits it into its own chunk that loads only where 3D is actually shown (scaled-down previews are detected via rect.width / offsetWidth and never load it). Under prefers-reduced-motion neither the auto-rotation nor the timeline runs and a single frame is drawn; when WebGL is unavailable, the context is lost or the frame budget is missed, it falls back to a static panel.

Pages
PGE-07

Split Band Hero

A hero split into three vertical columns: a text panel, a thin divider rail, and a visual panel. The visual panel breaks into six vertical bands, each holding one colour block of differing position and length that rises from below, staggered by 90ms so the eye is pulled from the visual across to the headline. Zero image assets and zero JS: animation-fill-mode backwards means the finished layout is what renders on SSR, with JS disabled, and under reduced motion. Summary facts are grouped by hairline rules and whitespace instead of cards.

Pages