Design and build the reveals "new this set" mechanics & tribes band

[Doberjohn]

Context

During the #390 reveals-page redesign, a "new this set" band was prototyped to showcase Set 13's new mechanics and tribe spotlights below the franchises section. The first implementation — flat cards in a gradient band — was rejected as too plain ("pretty bad") and pulled from #390 scope so it wouldn't block the launch of the redesigned reveals page. This issue covers redesigning and building the band as a follow-up, to be picked up after the redesigned reveals page (Tracker view + franchises) ships. Success: a visually compelling band on the reveals page that highlights the three new mechanics and two tribe spotlights, distinct enough that it reads as a feature rather than a list.

The curated content is already researched and verified against the card data (preserved in References below) — the work here is primarily the visual design and a stronger component, not re-deriving content.

Prerequisites

• Write access to Doberjohn/inkweave; feature branch (feature/<n>-reveals-whats-new-band)
• Redesign reveals page: immersive six-ink set-tracker view with two-view toggle #390 (reveals redesign) merged — this band slots into the redesigned RevealsPage Tracker view
• VITE_IS_REVEAL_SEASON=true in apps/web/.env.local to view /reveals
• Node + pnpm; Storybook (pnpm --filter inkweave-web storybook) for component iteration
• Familiarity with the reveals feature conventions (apps/web/src/features/reveals/, inkTint.ts, FONTS.hero, the design tokens)

Implementation Steps

Phase 1 — Design exploration (the rejected v1 was flat cards; go richer)

Step 1: Prototype 2-3 visual directions in Storybook before committing. The flat rgba(255,255,255,.025) cards read as a generic list. Directions to try:

• Per-spotlight ink/color theming (each mechanic/tribe tinted — e.g. Vine=emerald, Team=multi-ink, Temporary Shift=ruby/red-panda)
• Illustrative motifs or card-art thumbnails (a representative card image per spotlight)
• A distinct layout for the 3 mechanics (hero treatment) vs the 2 tribes (secondary)
• Optional hover/press interaction (the v1 was static)

Verify: screenshot each direction; review with the design owner before building the final.

Phase 2 — Content + component

Step 2: Re-create the content data file:

apps/web/src/features/reveals/setSpotlights.ts   // SpotlightGroup[] — see References for the verified content

Step 3: Build the redesigned band component + story:

apps/web/src/features/reveals/WhatsNewSection.tsx (+ .stories.tsx)

Render the two sub-groups (New mechanics x3, Tribe spotlights x2); ★ NEW badge only on genuine debuts (Vineling/Team/Temporary Shift/Red Panda — not Hunny).

Verify: Storybook story shows all 5 spotlights with correct titles, counts, badges, summaries, examples.

Phase 3 — Integration

Step 4: Render <WhatsNewSection /> in RevealsPage's Tracker view (below NewFranchises). Decide gating: always-on for Set 13, or behind a showMechanics flag.

Verify: /reveals shows the band in place, responsive at 390px and desktop.

Files Affected

Created

File	Purpose
apps/web/src/features/reveals/setSpotlights.ts	Curated per-set spotlight content (3 mechanics + 2 tribes)
apps/web/src/features/reveals/WhatsNewSection.tsx (+ .stories.tsx)	The redesigned band component

Modified

File	Change
apps/web/src/pages/RevealsPage.tsx	Render the band in the Tracker view below the franchises
apps/web/src/features/reveals/index.ts	Export the new component if needed

Testing / Verification

Component

• Story renders 3 mechanics + 2 tribes with correct titles/counts/summaries/examples
• ★ NEW appears only on Vine, Team, Temporary Shift, Red Panda (not Hunny)
• Responsive: single-column at 390px, multi-column desktop

Integration

• /reveals shows the band below the new-franchises section
• Design owner approves the visual treatment (the bar this issue exists to clear)
• pnpm check:stories, pnpm test, pnpm build green

Acceptance Criteria

• The band displays the 3 new mechanics (Vine & Floodborn Matters, Team Characters, Temporary Shift) and 2 tribe spotlights (Red Panda, Hunny) with the verified content
• ★ NEW badge marks only genuine debut classifications/keywords; Hunny (expanded, not new) has none
• The visual design is approved as a step up from the rejected flat-card v1 (not "too plain")
• Fully responsive; integrated into the redesigned reveals page
• New component has a story; tests + build pass

Rollback

• Component: the band is additive — git revert the component commit removes it with no other impact.
• Integration: remove the <WhatsNewSection /> render from RevealsPage (or gate it off via showMechanics={false}) to hide it while keeping the component.
• Full rollback: revert the feature PR → reveals page returns to hero + trackers + board + franchises with no band.

References

• Parent: Redesign reveals page: immersive six-ink set-tracker view with two-view toggle #390 (reveals page redesign) — this band was deferred from it
• Verified spotlight content (preserve verbatim):

Group	Icon	Title	★New	Count	Summary	Examples
New mechanics	🌿	The Vine & Floodborn Matters	yes	8 cards	Floodborn becomes a full tribal payoff axis; the "Created by the Vine" Vineling sub-tribe buffs/triggers off your Floodborn characters	Gaston · Pete · The Vine – Towering Stalk
New mechanics	👥	Team Characters	yes	11 cards	Dual-ink duos on one card that Shift onto either named half — via Shift, the new Combo Shift, or Duo Shift	Belle & Beast · Sulley & Boo · Mickey & Minnie
New mechanics	⏳	Temporary Shift	yes	3 cards	Shift onto a character, then at end of turn heal it and return the card to hand — a reusable blink that re-fires enter-play abilities	Ming Lee · Meilin Lee · Sun Yee
Tribe spotlights	🐼	Red Panda	yes	7 cards	Turning Red debuts as its own tribe, built around Temporary Shift	Ming Lee · Meilin Lee · Sun Yee
Tribe spotlights	🍯	Hunny	no	6 cards	Winnie the Pooh tribe fleshed out into a full archetype — density payoff, off-ink enabler, search Item	Winnie the Pooh · Christopher Robin · The Great Book of Hunny

• Reveals conventions: apps/web/src/features/reveals/ (inkTint.ts, NewFranchises.tsx as a styling reference, reveals.css)
• Potential future tie-in: the Floodborn-matters / Red Panda / Hunny synergy-rule candidates (the band could deep-link into them once they exist)