// ────────────────────────────────────────────────────────────────── // Takedown — design canvas composition. // All variants live as artboards on a single DesignCanvas. // ────────────────────────────────────────────────────────────────── // Tweak-aware splash that loops indefinitely for showcase. const SplashShowcase = () => { const [taglineShown, setTaglineShown] = React.useState(false); const [wordmarkShown, setWordmarkShown] = React.useState(false); const [tick, setTick] = React.useState(0); React.useEffect(() => { // 4 transitions @ 2.6s + 3s TAP THE T hold + 0.75s wordmark delay + 1s // tagline delay + 0.5s fade + ~5s hold = ~24s cycle. const id = setInterval(() => { setTaglineShown(false); setWordmarkShown(false); setTick((t) => t + 1); }, 24000); return () => clearInterval(id); }, []); // When cube lands on T-monogram: wordmark fades in 0.75s after, tagline // 1.25s after the wordmark (so 2s after settle). const onSettled = React.useCallback(() => { setTimeout(() => setWordmarkShown(true), 750); setTimeout(() => setTaglineShown(true), 2000); }, []); return (
{/* TAKEDOWN wordmark below cube, fades in 0.5s after settle. */}
TAKEDOWN
COMBAT SPORT LIVES HERE.
); }; // Cube-exploded reference card: shows each face of the 5-pose sequence. const CubeFacesCard = () => { return (
SPLASH CUBE · 5 FACES · 4 TURNS
The brand opener.

Black ground, white cube tumbles through 5 poses before settling on the T-monogram. Each step is a pure single-axis roll (no in-between matrix slerp). The BACK face does double-duty - it shows TKDN at the start, then swaps to TAP THE T while hidden during the LEFT → TOP turn.

{[ { label: "01 · TKDN (start)", sub: "BACK face · rotateY(180)", el: (
{["T","K","D","N"].map((c) => (
))}
), }, { label: "02 · BUILT FOR PROS", sub: "LEFT face · ← left", el: , corner: "tr", }, { label: "03 · PRESENT AND FUTURE", sub: "TOP face · ↓ down", el: , corner: "br", }, { label: "04 · TAP THE T", sub: "BACK face (swap) · → right", el: , corner: "tl", }, { label: "05 · T-MONOGRAM (settle)", sub: "RIGHT face · ↓ down", el: , }, ].map((f) => (
{f.el} {f.corner && ( <>
)}
{f.label}
{f.sub}
))}
CADENCE
2.6s per turn (cubic-bezier .4/0/.2/1). All faces hold the same duration before the next flip.
SETTLE
After T-monogram lands, wordmark fades in at +750ms, tagline at +2000ms.
EDGE MARKS
Accent right-angle on 3 of 5 faces. TAP THE T's corner sits on the edge it just rotated off (top — shared with PRESENT AND FUTURE).
HOLD
Final pose holds ~5s before the showcase restarts the cycle.
); }; // Tiny helper for the card's word labels — Avenir Next italic bold to match // the cube's CubeLabel without pulling in the splash module. const CardLabel = ({ text }) => (
{text}
); // Notes header for canvas sections const SectionIntro = ({ code, title, body }) => (
{code}
{title}

{body}

); // Build the design canvas const TakedownCanvas = () => { const [seed, setSeed] = React.useState(0); // forces re-render on tweak changes return ( {}} onSignIn={() => {}} /> {}} onSignIn={() => {}} /> {}} onSignIn={() => {}} /> {}} onSignIn={() => {}} /> {}} onLogin={() => {}} onForgot={() => {}} onSignup={() => {}} /> {}} onEmail={() => {}} onSignIn={() => {}} /> {[0, 1, 2].map((i) => ( {}} onBack={() => {}} onSkip={() => {}} /> ))} {}} onContinue={() => {}} /> {}} onContinue={() => {}} onSkip={() => {}} /> {}} onSubmit={() => {}} /> {}} /> {}} /> {}} /> {}} /> ); }; // ── Tweaks panel ────────────────────────────────────────────────── const TweaksContent = () => { const [tweaks, setTweak] = useTweaks(window.__TWEAKS_DEFAULTS); // Apply tweaks live: inject a high-specificity style rule that wins over // brand.css's :root/.tkdn-dark/.tkdn-light declarations. React.useEffect(() => { let el = document.getElementById("__tweak-style"); if (!el) { el = document.createElement("style"); el.id = "__tweak-style"; document.head.appendChild(el); } el.textContent = ` :root, .tkdn-dark, .tkdn-light { --accent: ${tweaks.accent} !important; --ring-focus: ${tweaks.accent} !important; } `; }, [tweaks.accent]); return ( setTweak("accent", v)} options={["#F04B24", "#C61D1D", "#0D0808", "#1D8EC7", "#9AC78B"]} />
F04B24 brand · C61D1D flag-red · 0D0808 mono · 1D8EC7 info · 9AC78B success.
Theme + CTA tone are tweakable inside the Profile→Settings prototype (artboard 07). Tap the gear, then toggle. This panel only changes globals.
); }; // Mount const App = () => ( <> ); ReactDOM.createRoot(document.getElementById("root")).render();