# Concept C, CLUBHOUSE: 21st.dev components ported

Both pages are single-file vanilla HTML, so every component below was ported by hand: the pattern and behaviour are kept, the React, Motion and Tailwind are gone. Sources were read with `mcp__21st__get_component` on the paid account. The install commands are for the React implementation to pull the originals later (replace `$API_KEY_21ST` with the team key).

| 21st.dev id | Component (author) | Install | Used where |
|---|---|---|---|
| 20033 | Pixelated Image Reveal (soralabs) | `npx shadcn@latest add "https://21st.dev/r/soralabs/pixelated-image-reveal?api_key=$API_KEY_21ST"` | landing: the four case-study cards |
| 21470 | Logo Cloud Marquee (7ovr) | `npx shadcn@latest add "https://21st.dev/r/7ovr/logo-cloud-3?api_key=$API_KEY_21ST"` | landing: the two labelled logo rows in the proof band |
| 18898 | Feature Bento (uilayout) | `npx shadcn@latest add "https://21st.dev/r/uilayout.contact/feature-bento?api_key=$API_KEY_21ST"` | dashboard: the member "for you today" trio (live film card, continue card, agent card) |
| 23545 | Presence Avatars (ddoemonn) | `npx shadcn@latest add "https://21st.dev/r/ddoemonn/presence-avatars?api_key=$API_KEY_21ST"` | landing hero, community rail, every room card; dashboard "Online now", "Cohort online", "Team online" |
| 22085 | Testimonials 13 (shadcnui-blocks) | `npx shadcn@latest add "https://21st.dev/r/shadcnui-blocks/testimonials-13?api_key=$API_KEY_21ST"` | landing: the quote marquee with avatars and employer marks |
| 20459 | Number Ticker (danielpetho) | `npx shadcn@latest add "https://21st.dev/r/danielpetho/basic-number-ticker?api_key=$API_KEY_21ST"` | landing: the four headline stats in the proof band |
| 19070 | Advanced Stats (uilayout) | `npx shadcn@latest add "https://21st.dev/r/uilayout.contact/advanced-stats?api_key=$API_KEY_21ST"` | dashboard, team lead: the KPI row and the readiness-by-level chart |
| 23552 | Segmented Control (ddoemonn) | `npx shadcn@latest add "https://21st.dev/r/ddoemonn/segmented-control?api_key=$API_KEY_21ST"` | landing: audience switch and leaderboard range; dashboard: persona switch |
| 13063 | Leaderboard Rankings (trophyso) | `npx shadcn@latest add "https://21st.dev/r/trophyso/leaderboard-rankings?api_key=$API_KEY_21ST"` | landing: the Leaderboard tab; dashboard: the leaderboard cards |

## What changed in each port

**20033 Pixelated Image Reveal.** Kept: two stacked layers, an N x N grid of pixel cells, a randomised stagger that fills the cells over `stepDuration` (300ms), the swap of the underlying layer at the midpoint, a second randomised stagger that clears the cells, generation counters so a fast hover in/out cancels cleanly, coarse-pointer fallback to tap-to-toggle, reduced-motion fallback to an instant swap. Changed: grid is 8 x 8 instead of 7 x 7, the pixel colour is ember, the cells are plain `<i>` elements toggled with `setTimeout` instead of Motion delays, the second layer is a dark ember panel with the organisation's mark rather than a second photograph, and `next/image` is a plain `<img>`.

**21470 Logo Cloud Marquee.** Kept: duplicated track, `translateX(-50%)` keyframe on a linear curve, mask fade on both edges, pause on hover, reduced-motion turns the animation off. Changed: two rows with opposite directions and different durations; logos are `<img>` from `../assets/logos/` (Walmart, TikTok and WireApps are transparent PNGs treated like google.png; Type B Digital is an opaque JPEG on its own white plate with no filter); grayscale at rest with an opacity-only hover transition (no `filter` transition); under reduced motion the track wraps and shows one set only.

**18898 Feature Bento.** Kept: the hero card with a full-bleed image under a gradient scrim and a live pill, tiles that combine a label, a big line and a supporting line, a CTA in the tile foot. Changed: three equal tiles instead of a 3 x 3 auto-rows grid (the dashboard centre column is narrow), the live pulse is a transform/opacity ping rather than `animate-ping` on a box-shadow, the hover scale-up on the hero image was removed (functional UI seen daily), all colours are brand tokens.

**23545 Presence Avatars.** Kept: absolutely positioned tiles on a rail whose width is computed from `visible * (size - overlap)`, overflow chip with `+N`, stable ordering by first-seen, initials fallback when there is no photo, `aria-label` sentence ("Aamir, Carolyn and 7 others are here"). Changed: the Motion spring (`stiffness 520, damping 34, mass .45`, which is near critically damped) became a 240ms `--ease-out` transform transition from `scale(.86)` + opacity 0; a green presence dot was added; a small simulation joins and leaves people every 4 to 5 seconds and is disabled under reduced motion.

**22085 Testimonials 13.** Kept: an auto-playing marquee of quote cards, each with avatar, name, role, quote and an employer mark, pause on hover, duplicated list for the loop. Changed: the odd/even flip-and-grid-logo panel was dropped; the employer mark sits in the card foot next to a "Team programme" or "Career" tag so the two proof types read as mixed; the X/Twitter link button was removed; people without a photo get initials in an ember chip.

**20459 Number Ticker.** Kept: tween from 0 to the target when the element enters the viewport, rounding for integers, tabular numerals. Changed: driven by `requestAnimationFrame` with a cubic ease-out over 1.6s instead of Motion `animate`; supports `data-decimals` (4.8) and `data-suffix` (+); en-GB thousands separator; fires once via `IntersectionObserver`; under reduced motion the final value is written immediately.

**19070 Advanced Stats.** Kept: the KPI row (label, big number, change line coloured by direction), a chart panel beside a dark goal panel with a progress bar. Changed: recharts was replaced with a CSS bar chart (two bars per readiness level, week 1 versus now, values labelled above the bars and in an `aria-label` sentence); the scroll-triggered timeline reveals were removed because the dashboard is functional UI; the goal panel became the team learner's readiness meter and the lead's programme progress stepper.

**23552 Segmented Control.** Kept: `role="radiogroup"` with `role="radio"` buttons, `aria-checked`, arrow-key navigation, a thumb positioned with `translateX(index * 100%)` over an equal-column grid, the inset shadow well. Changed: the spring on the thumb was deliberately removed. Persona, audience and tab switches are high-frequency actions, so the control does not animate at all; only the content cross-fades (90ms out, 90ms in) as the brief requires. The clip-path text-colour trick from the original is unnecessary once the thumb is instant.

**13063 Leaderboard Rankings.** Kept: rank column with crowns for the top three (gold, silver, bronze), avatar with initials fallback, name plus byline ("Level 6 · Mentor"), rank-change delta with an arrow, right-aligned tabular value, divided rows in a bordered card. Changed: pagination was dropped (eight rows on the landing page, five on the dashboard), the current user row is highlighted in ember-soft on the dashboard, and a "How levels work" panel sits beside it.

## Not from 21st.dev

The canvas pixel resolve on the room banners and the private-room banner is a mosaic resolve (shrink to `w/block`, blow back up with `imageSmoothingEnabled = false`, block from 64 to 1 over 900ms on a cubic ease-out, video frames when the clip is decodable, poster frame otherwise, skipped under reduced motion). The community-first tab shell, the week calendar, the member grid, the readiness ladder, the 12-week format and the phone tab bar are hand-built.