// import LogoChanry from "./assets/clanry-01.svg"; /* global React, ReactDOM */ const { useState, useEffect, useRef, useMemo } = React; /* ---------- Reveal hook ---------- */ function useReveal() { useEffect(() => { const els = document.querySelectorAll( ".reveal, .reveal-scale, .reveal-left", ); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.14, rootMargin: "0px 0px -40px 0px" }, ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } /* ---------- Tiny atoms ---------- */ const AcidDot = ({ className = "" }) => ( ); const SectionLabel = ({ children, n }) => (
{n} {children}
); /* ---------- Placeholder card ---------- */ function Placeholder({ w = 220, h = 290, label = "PORTRAIT", price = "$60", persona = "", className = "", style = {}, hero = false, img = null, }) { return (
{img && (
)}
{label} {price}
{persona}
{!img && (
image slot
)} {hero && View →}
); } /* ---------- Nav ---------- */ function Nav() { return (
); } /* ---------- Spots counter (shared across Hero + Founding + Claim) ---------- */ /* Single source of truth: one useSpots() call in App, value passed as prop to every counter. */ function useSpots() { const [spots, setSpots] = useState(() => { /* Plausible Founding 20 scarcity range: 9–17 out of 20. Avoids fake-panic numbers (1–3) and "nobody signed up" numbers (18–19). */ return 9 + Math.floor(Math.random() * 9); }); useEffect(() => { const id = setInterval(() => { setSpots((s) => Math.max(3, s - (Math.random() < 0.35 ? 1 : 0))); }, 18000); return () => clearInterval(id); }, []); return spots; } /* ---------- Hero ---------- */ function Hero({ spots }) { const layouts = [ { cls: "float-a", style: { top: "12%", left: "4%", "--rot": "-8deg" }, label: "PERSONA", price: "$80", persona: "", w: 210, h: 270, img: "assets/imgOne.jpeg", }, { cls: "float-b", style: { top: "7%", right: "6%", "--rot": "7deg" }, label: "LoRA PACK", price: "$60", persona: "", w: 200, h: 260, img: "assets/ImgTwo.avif", }, { cls: "float-c", style: { bottom: "14%", left: "7%", "--rot": "-4deg" }, label: "WORKFLOW", price: "$30", persona: "", w: 190, h: 240, img: "assets/imgThree.avif", }, { cls: "float-d", style: { bottom: "9%", right: "4%", "--rot": "6deg" }, label: "SUB TIER", price: "$20", persona: "", w: 210, h: 270, img: "assets/imgFour.avif", }, { cls: "float-a", style: { top: "40%", left: "-3%", "--rot": "-12deg" }, label: "AGENCY", price: "$60", persona: "", w: 180, h: 230, img: "assets/imgFive.avif", }, { cls: "float-b", style: { top: "46%", right: "-2%", "--rot": "10deg" }, label: "DROP", price: "$30", persona: "", w: 180, h: 230, img: "assets/imgSix.avif", }, ]; return (
{/* floating cards */} {layouts.map((l, i) => (
))} {/* center scrim */} {/* marquee */}
{Array.from({ length: 2 }).flatMap((_, k) => [ "Personas", "LoRA Packs", "Workflows", "Subscriptions", "Agency Bundles", "One-off Drops", "Custom Requests", "Fan Tiers", "Creator Collabs", "API Access", ].map((t, i) => ( {t} )), )}
); } /* ---------- Problem (THE REALITY FOR AI CREATORS) ---------- */ function Problem() { const cards = [ { name: "STRIPE", lines: [ "Bans AI content without warning.", "Freezes funds for 90+ days.", "No human appeal process.", ], stat: "3 of 5 AI creators banned in 2025–2026", }, { name: "FANVUE / PATREON", lines: [ "Takes 12–20% of every dollar.", "Restricts NSFW-adjacent work.", "Can delete your account overnight.", ], stat: "$18K/mo lost on a $100K business", }, { name: "GUMROAD", lines: [ "10% fees + payment processor fees.", "AI content in gray zone.", "Zero creator ownership.", ], stat: "Built for ecommerce, not creators", }, ]; return (
The reality for AI creators

Every payment platform is built to{" "} betray you.

{cards.map((c, i) => (
0{i + 1}
{c.name}
BANS YOU
{c.lines.map((l, j) => (
× {l}
))}
→ {c.stat}
))}
); } /* ---------- Flips (Clanry flips the model) ---------- */ function Flips() { const items = [ { title: "Unbannable by design", body: "Policies written by creators who’ve been banned. Real appeals, time-boxed reviews, no silent freezes.", }, { title: "Instant, non-custodial.", body: "USDC straight to your wallet. Founding 20 gets it the second a buyer pays — new creators weekly after 72h fraud review. We never hold your money.", }, { title: "Built by banned creators", body: "We’ve been deplatformed everywhere too. Clanry is the platform we wished existed.", }, ]; return (

Clanry{" "} flips {" "}
the model.

The fix
{items.map((it, i) => (
{i === 0 && ( <> )} {i === 1 && ( )} {i === 2 && ( <> )}
0{i + 1}

{it.title}

{it.body}

))}
); } /* ---------- How it works ---------- */ function How() { const steps = [ { n: "01", t: "Claim your handle", b: "clanry.com/yourname. Yours forever. Takes 12 seconds.", }, { n: "02", t: "Set up your shop", b: "Personas, LoRAs, workflows, subs, requests. Price anything.", }, { n: "03", t: "Get paid", b: "USDC straight to your wallet. Founding 20: instant. New creators: weekly after 72h fraud review.", }, { n: "04", t: "Keep building", b: "Ban-proof policies. Real disputes. We back AI creators.", }, ]; return (
How it works

Four steps.
Zero gatekeepers.

Skip ahead — claim handle →
{steps.map((s, i) => (
{s.n}

{s.t}

{s.b}

))}
); } window.Nav = Nav; window.Hero = Hero; window.Problem = Problem; window.Flips = Flips; window.How = How; window.useSpots = useSpots; window.useReveal = useReveal; window.Placeholder = Placeholder; window.SectionLabel = SectionLabel; window.AcidDot = AcidDot;