01
Tokens before components
Colour, type and spacing decided on real screens first — the component palette is a consequence, not a starting point.
foundationspalette
Split Feature Rows
Image/text rows that alternate side, fade up 140ms apart when scrolled into view, and zoom their art panel on hover — the workhorse marketing layout.
450
MIT licensev1.0.01.1 KB gzipzero dependenciesby Motif Studioadded 2026-09-09review due 2026-12-08
Live playground — drag, click, hoversandboxed previewsample copy
feature rows — scroll for the fadewaiting…
02
Motion with a budget
Every animation earns its place: under 200ms for feedback, over 500ms only for story beats, and reduced-motion kills the whole theatre.
motionprinciples
each row fades up 140ms after the last — and the art panel zooms gently on hover.
Ambiencehsl(262)
vibes
Ambience is a live light wash over the preview. Full palette re-theming of every demo arrives with Theme Studio (Pro).
deps: zeroJSX + TailwindMIT · original
split-feature-rows.tsx
// React — one observer for all rows
const [seen, setSeen] = useState(false);
useEffect(() => { /* IO on the list container, threshold .3 */ }, []);
{rows.map((r, i) => (
<article key={r.k} className={i % 2 ? "row flip" : "row"}
style={{ animation: seen ? `mf-rise .5s ease-out ${i * 140}ms both` : "none",
opacity: seen ? 1 : 0 }}>
<Art /> <Copy />
</article>
))}
// art panel: group-hover zoom via transform, never layoutSnippet provenance
lines 1–11 · v1.0.0v1.0.0Motif Studio2026-09-09the only version the catalog records for this asset
No changelog entry mentions “Split Feature Rows”, so the catalog records a single version for it.
Every line above is attributed to the single version this catalog records — we keep no per-line history, so no per-line attribution is invented. See the provenance page for the rule and the gaps.
Review notes · anchored to code lines
Threads attach to a line number in this asset's snippet, so a remark about the focus trap stays next to it.
Loading notes…
The snippet on this page is 11 lines long, so anchors run 1–11. Notes are per-asset and per-browser; a shared review thread is a server feature, and this panel is the local stand-in that proves the anchoring works.
✎Design notes from the studio
Why it works — Alternating image/text rows are the workhorse of feature pages because the eye always knows where to look next.
The idea — Stagger the rows' reveal (140ms apart) instead of releasing them together — sequence is what makes the pattern feel deliberate.
When to skip it — Alternating sides is meaningless below ~700px; on mobile stack consistently and let the image lead, then the copy.
Dependency-aware copy: zero packages to install — paste and run. All markup is original Motif UI content (MIT).
Course rail — understand it before you ship it
Live variants
Variant gallery
The same Split Feature Rows demo re-lit in three tones — no code change, three personalities.
feature rows — scroll for the fadewaiting…
01
Tokens before components
Colour, type and spacing decided on real screens first — the component palette is a consequence, not a starting point.
foundationspalette
02
Motion with a budget
Every animation earns its place: under 200ms for feedback, over 500ms only for story beats, and reduced-motion kills the whole theatre.
motionprinciples
each row fades up 140ms after the last — and the art panel zooms gently on hover.
feature rows — scroll for the fadewaiting…
01
Tokens before components
Colour, type and spacing decided on real screens first — the component palette is a consequence, not a starting point.
foundationspalette
02
Motion with a budget
Every animation earns its place: under 200ms for feedback, over 500ms only for story beats, and reduced-motion kills the whole theatre.
motionprinciples
each row fades up 140ms after the last — and the art panel zooms gently on hover.
feature rows — scroll for the fadewaiting…
01
Tokens before components
Colour, type and spacing decided on real screens first — the component palette is a consequence, not a starting point.
foundationspalette
02
Motion with a budget
Every animation earns its place: under 200ms for feedback, over 500ms only for story beats, and reduced-motion kills the whole theatre.
motionprinciples
each row fades up 140ms after the last — and the art panel zooms gently on hover.
Theme Studio preview
Theming example — two token themes
Assets are token-driven (100% design-token driven). Here the same scene runs under two theme presets from the token sheet.
Midnight / violet
feature rows — scroll for the fadewaiting…
01
Tokens before components
Colour, type and spacing decided on real screens first — the component palette is a consequence, not a starting point.
foundationspalette
02
Motion with a budget
Every animation earns its place: under 200ms for feedback, over 500ms only for story beats, and reduced-motion kills the whole theatre.
motionprinciples
each row fades up 140ms after the last — and the art panel zooms gently on hover.
--accent 262 · dark surfaces
Bone / amber
feature rows — scroll for the fadewaiting…
01
Tokens before components
Colour, type and spacing decided on real screens first — the component palette is a consequence, not a starting point.
foundationspalette
02
Motion with a budget
Every animation earns its place: under 200ms for feedback, over 500ms only for story beats, and reduced-motion kills the whole theatre.
motionprinciples
each row fades up 140ms after the last — and the art panel zooms gently on hover.
--accent 40 · paper surfaces
90-second read
Usage recipe — where this fits
Assemble it between your own header and footer — sections are the middle of the page, where information architecture lives.
Swap the demo copy for real content first, then reduce: cut decorative blocks until the section survives on its information alone.
belongs in sectionsscroll behaviourhover behaviour
Cost honesty
Performance note
1.1 KB gzipone-time layout — text and cards paint once; the cost is in image weight and font loading, not the structure.
Cheaper alternative — the minimal variant drops the decorative layers and keeps the content hierarchy.
What it needs
Browser support strip
CSS Gridflexboxcustom propertiescontainer queries (optional)all evergreen browsers
No polyfills ship with the asset — if a listed feature is missing in a target browser, the graceful fallback is the static layout.
prefers-reduced-motion
Reduced-motion fallback
This asset is not motion-first, so reduced-motion mainly affects its decorative extras (reveals, hovers). The content layer never depends on motion to be readable.
Pressable step-through
Keyboard walk demo
Step through what a keyboard user experiences with this asset.
1
Tab into the section via the skip link or heading anchor
Auto-suggested
Composition map — what pairs well
Same-family assets that compose cleanly with this one:
Sections
Aurora Hero Section
Full-viewport hero: aurora veil backdrop, scramble headline, dual CTAs and a floating product chip — the section most Prompt users ask for first.
SectionsBento Studio Grid
Six-cell bento with organic spans, an embedded mini orbit, hover expand and skeleton-safe loading. Cells accept any card content via props.
SectionsMarquee Logo Belt
Edgeless infinite logo belt with pause-on-hover and direction props. Ships with a 12-logo placeholder set you can swap via one array.
Learn essays that teach the technique
One original micro-case
Inspiration context
The pricing page that stopped lying
A pricing section with three tiers and no indication of which one people actually chose produced analysis paralysis. Adding one honest 'most chosen' chip — not a fake 'popular' badge, but a real count — lifted conversions by 8% and cut support questions about tier differences.
Written in-house — no screenshots, no borrowed imagery. The pattern, not the pixels.
Every version, why
Changelog — this asset
v1.0.02026-09-09
Current release — this page documents the asset as shipped.
v1.0.02026-08-18
Token pass: colours and radii moved to the design-token sheet; a11y score raised to the current bar.
v0.1.02026-07-02
Initial release to the library — original markup, MIT licensed.
30-day sparkline
Copy history
450copies this month
Sample series from this asset's usage fingerprint · last 12 days shown.
Future queue
Community remixes
Queue opens after launch. Remixes arrive as alternate versions of this asset — same job, different voice — submitted by users and audited by the studio before they appear beside the original.
0 remixes yetaudited by studiocredit + link back to the remixer
Star / favourite
Save this asset
Your collection is stored in this browser (localStorage) — no account needed.
Build a page around it
Pairs well with a prompt
This asset belongs inside a bigger build — here is the prompt that would generate a page containing it:
Print-inspired web — a magazine spread that scrolls
Editorial spread · Folio rules · Ink logic
Exact tree
Bundled dependencies — disclosed
split-feature-rows.tsx0.4 KB raw · ~1 KB gzip
(no runtime dependencies)the CSS ships with the snippet
Full snippet ≈ 0.8 KB raw, ~1 KB gzip — before any framework you already load.
Download
Export as single file
Grab the asset as one file, ready to paste into your project.
Files are generated in your browser from the snippets on this page — nothing leaves the tab.
Scale, not clutter
Sizing system — three densities
Density is a token decision, not a per-page override — pick one density per product surface and hold it. Active: Default.
Runnable copy
Open in a sandbox
Opens this asset in a new tab with its stylesheet injected — a real, editable HTML document in your browser. No account, no upload.
If the tab is blocked, use the single-file export instead — same content, saved locally.
Written version first
Tutorial transcript
This asset does not have a video yet — so the written version stands in: the code line walk below narrates the snippet line by line, and the design rationale on this page explains the default decisions. When a video ships, this exact panel hosts its full transcript.
video: not yettranscript: line walk belowformat: markdown, searchable
Annotated snippet
Code line walk
The lines that matter, with the reason they matter. Click one:
Trade-off, visible
Size vs. quality slider
~2 KB~6 KB~12 KB
Standard · CSS + hover states
~6 KBadds transitions, focus-visible and reduced-motion rules
The slider is honest: the slim tier has no JS, the pro tier pays for behaviour. Start slim, upgrade only the surfaces that need it.
HTML → React, priced
Stack-switch cost note
Taking the HTML/CSS version into a React component costs real work — and the cost is predictable:
Event wiring
Hover, focus and click become handlers — the CSS stays, the state appears.
Props for the knobs
Every inline value that should vary becomes a prop with a default — the defaults must match the CSS exactly.
The estimate
A clean port of this asset is 20–45 minutes for a React developer — the 375-character stylesheet is the easy half.
Find it the way you say it
Tag synonyms
Search on this site resolves synonyms globally — "dropdown", "select" and "picker" land on the same asset, so you never need to know the catalog's internal vocabulary.
When to pick which
Sibling comparison
| Compare | Split Feature Rows | Aurora Hero Section | Bento Studio Grid |
|---|---|---|---|
| Kind | Sections | Sections | Sections |
| Bundle | 1.1 KB gzip | 6.2 KB gzip | 5.5 KB gzip |
| a11y | 96/100 | 97/100 | 96/100 |
| Dependencies | none | none | none |
| Copies / mo | 450 | 4,860 | 3,960 |
| Interactions | scroll, hover | scroll, hover | hover |
The honest verdict — Split Feature Rows is the lighter default here; reach for Aurora Hero Section when its extra weight buys an interaction this one lacks.
Similar to this — scored on shared tags, not hand-picked
Related assets
Read next — two guides and a prompt
picked by tag overlap, not by handGuide
A form is a conversation
8 min · Beginner · updated 2026-09-12
Guide
Before you copy that component: the a11y checklist
8 min · Beginner · updated 2026-09-06
Prompt
3D portfolio with neon orbit showcase
Portfolio · 87% fidelity
How these three were chosen: essays scored on shared tags (0 and 0 matches), then prompt scored on block/vibe overlap (0 matches). The rule lives in src/lib/spine.ts, so the same asset always links to the same three pages and a second reader can reproduce the choice.
Was this helpful?