Appearance
Owners' intended public experience
Authority: frontend main ad33ecb44f208d91e69aae215471e70941111483. Paths below refer to that commit unless explicitly marked dev. Final source and observed rendering outrank earlier docs/redesign proposals. The intended migration is visual/product parity with the explicit compatibility adaptations in the manifest, not defect-for-defect replication.
Execution adaptations are resolved in 11: separate visual systems; marketing creator class/keyframe rename; no global catch-all/Geist fix; compact contact consent; exact safe copy; local-mode intake; section-specific responsive matrix. This file describes source appearance, not permission to reproduce unsafe copy or implementation.
Rendered references
See visual index and visuals/capture-results.json for route, viewport, status, headings, link destinations, canonical/robots, image loading and browser exceptions. Primary references include:
- Main desktop home, mobile home, mobile open nav.
- Main creator home, services, contact, careers dialog.
- Dev desktop home, dev contact, dev login.
The initial full-page shots use reduced motion for stable content. The phone has no explicit poster in main's Hero.Phone; its reduced-motion frame can be blank. This is a source limitation, not the desired creative. Motion/revealed screenshots supplement the initial shots. Initial dev full-page shots can leave observer-driven sections unrevealed; use the scrolled/revealed baseline for those sections. Third-party Calendly, embedded video and remote art may show blocked-resource fallbacks. A full-page screenshot alone does not establish focus, media, or scroll behavior.
Design tokens and shell
app/(site)/site.css:9–126, _components/ui.tsx, util.ts, and layout.tsx define the visual language:
| Element | Final main specification |
|---|---|
| Palette | Cream #f5efe4, paper #fffdf8, ink #14121a, blue #2563eb, hot orange #ff5c1a; muted ink 64%, muted cream 66%, line ink 14%. |
| Typography | Rubik 500 body, 700 emphasized, 800 display; Space Mono 400/700 for eyebrows/numeric labels. Display line-height .92, tracking −.035em. H1 clamp(2.9rem,6.3vw,5.7rem); H2 clamp(2.35rem,5.2vw,4.6rem); H3 clamp(1.5rem,2.4vw,2.1rem), line-height 1.02. Body 1rem/1.5; lede clamp(1.05rem,1.4vw,1.3rem)/1.45; eyebrow .72rem, uppercase, .08em tracking. |
| Geometry | 3px ink borders; cards 28px radius, windows 20px, stickers/buttons pills; hard shadows 6×6px, large 10×10, small 3×3, no soft blur on normal Toybox tiles. Slight deterministic alternating tilts. |
| Layout | .cc-wrap max 1360px, horizontal padding clamp(1.25rem,3.6vw,3rem); section padding clamp(4.5rem,9vw,8.5rem). Strong full-width color bands. |
| Buttons | Normal minimum height 3.4rem; small 2.75rem; large 4.1rem; 3px ink border and hard shadow. Hover/focus lift −2px/−2px and enlarge shadow, arrow moves +4px. Active presses +3px/+3px, shadow 1px. Focus outline 3px blue with 3px offset. |
| Decoration | Dot-grid hero/page-head backgrounds use CSS radial gradients; source comment “no gradients anywhere” describes flat main surfaces, not literally every CSS declaration. Browser-window bars, stickers, title strips and icons carry the playful visual hierarchy. |
| Shell | Sticky cream header at top, z-index 50, 76px content row, 3px ink divider. Logo tile + BloxClips wordmark. Desktop navigation from md/768px. Mobile expandable in-flow menu, not a full-screen drawer. Footer paper/cream with link columns and divider. |
Header links: Case Studies → /campaigns, Services → /services, Careers → /careers, orange Book a Call → /contact. Home logo → /. Active link uses exact path or descendant matching. Mobile button says Menu/Close, maintains aria-expanded, closes on Escape and link click. Its hidden CTA is a focus-management gap to correct while adapting.
Footer (content.ts:985+, _components/Footer.tsx): identity/blurb/platform line; Pages (Home, Case Studies, Services, Careers, Book a Call); Additional info (What is clipping?, Creator Guides); Legal (Privacy, Terms); Social (X, Discord, business email); copyright. Main removed ClipsRev referral. Preserve dev cookie-preference discoverability during consolidation; one shared marketing footer, not both layout and page copies.
Homepage: distinct audiences
_components/Home.tsx:38+ is the definitive section order. Header and footer surround both views. Brands is default; ?audience=creators or legacy clippers, then persisted bloxclips:audience, can select Creators. SSR starts Brands and hydrates preference. Preserve unrelated query/hash parameters when consuming audience.
Brands: Hero → LogoWall → Stats → CaseCards → Process → Problem → Scorecard → Guarantee → brand FAQ → FinalCta.
Creators: Hero → LogoWall → CreatorStats band → Proof wall → CreatorSteps → creator FAQ → footer. There is no brand case grid, five-step process, comparison or final ink CTA in this view.
Hero (Hero.tsx, CSS .cc-hero, .cc-phone-*): saturated blue with white brand headline, orange field/ink creator headline, sparse dot grid, chunky black phone at desktop, floating statistics stickers. Audience control is a physical pill switch with Brands/Creators radio semantics. Brand headline “Launch Campaigns for Your” with a white outlined word sticker cycling Game / Brand / Channel / Service. Subhead “Scale your brand through short-form mass distribution campaigns.” Brand primary Book a Call, secondary How It Works → #how-it-works, note “Start getting millions of views within a week.” Creator headline “Get Paid to Create” with Clips / Shorts / Content / Videos; “Post Roblox Shorts and earn real money from campaigns.” The rendered creator CTA overrides the content record to Start Creating → /creators/apply. Do not incorrectly send that button straight to Whop just because hero.creators.primaryCta in content.ts has a Whop URL.
Headline swap every 2.6 seconds, 190ms exit/450ms settle; all words occupy the same grid cell so width never jumps. Phone rotates five unique local clips every 6 seconds, muted/looping/inline, only active clip plays; tab-hidden time is paused. Desktop phone leans and stickers float; narrow screens suppress the phone in the final CSS rather than squeezing an unreadable miniature beside text. Brand and creator hero palettes animate; reduced-motion suppresses cycling. Add a meaningful supplied still for its paused state.
Trusted wall: ten marks present in pinned final source (eight images and two text marks), black on light paper sticker tiles. Three copies form the normal continuous rail; only first copy is exposed to assistive technology. Hover pauses; reduced motion uses a wrapped static wall. Logo optical sizes use contentRatio/scale rather than raw PNG canvas size; Rush receives the large-mark boost, Whop 1.25, Indigo 1.1. The older eleven-mark count included the explicitly unconsumed CR replacement and is superseded.
Brand stats: four tilted tiles, 100,000+ creators, 1B+ campaign views, 1M+ clips made, $600K+ paid to creators. One column on narrow screens, two from 640px. Colors blue/orange/ink/paper. Count-up runs once over 1.7s with stable display units and server-visible final numbers. These are owner-deck aggregate claims, not live account balances.
Featured cases: “Real launches. Real numbers.” Four cards ordered ForgeGUI, Kill Streak, Fish It, David Kushner, 1/2/4 columns at base/sm/lg. Game art or clip, category sticker, lead metric, title/introduction; card lifts to expose “See case study.” Browse-all → /campaigns. Main summary content and full case override data both contain metrics; reconcile them in dev instead of creating divergent copies.
Process: “Five steps from brief to guaranteed reach.” Five numbered nodes with copy: Strategy & brief; Creators activate; Every clip reviewed; Reach guaranteed; Full reporting. Horizontal at desktop, vertically readable on mobile. #how-it-works is the anchor.
Problem: ink band, sticky desktop left headline “Paid ads cost more every year, and viewers ignore them anyway,” three numbered right rows (cost, skipping, trust). Scorecard: blue band, “Creators vs paid ads,” two contrasting columns and six comparison rows. Guarantee: orange “Every clip reviewed. Reach guaranteed.” plus tilted “50,000+ clips reviewed on a single campaign” stamp. These are commercial claims, not executable finance rules.
FAQ: split heading/list at desktop, stacked on mobile; thick divided rows with orange circular plus/cross controls and expandable text. One open index; accessible button expanded state and answer region. Match visible FAQ data to JSON-LD. Main creator answer “paid for every view” must be adapted to eligible approved views; payout timing copy is a marketing assertion, not a backend guarantee. Final brand CTA is centered ink band with scattered stickers, Book a Call and See case studies, with no corresponding closing band on creator home.
Secondary public routes
| Route | Hierarchy, content and behavior |
|---|---|
/campaigns | Page head and network proof; featured evidence-led cards; seven case-study records in source order ForgeGUI, Kill Streak, David Kushner, Anime Apocalypse, Fish It, Bee Garden, Tolou. Final launch hides chips for non-featured entries; do not restore earlier visual chips. Public case studies are distinct from live campaign enrollment. |
/campaigns/[slug] | Breadcrumb/back navigation, campaign header/result, media or game art, published stat tiles before optional live Roblox tiles; brief/results/narrative content, supporting clips, founder proof where available, related cases and booking CTA. ForgeGUI leads 250M+ views, 50,000+ uploads, 460K+ new users; founder card has avatar, July 22 post text, growth-chart image and external X link. Kill Streak published results are not replaced by present-day live players/visits. Unknown slugs return 404. |
/services | Orange “UGC & clipping.” hero with two portrait clips; mass-distribution explanation and four repeated-touch feed examples; blue conversion band; UGC section with outputs and two clips; flipped clipping section; blue comparison with quick-pick card and one-creator versus campaign tiles; four included operations tiles; orange footage-service band; platform row; ink final CTA. Six new MP4/JPG service pairs. Wide multi-column layouts become stacked mobile sections. |
/contact | Blue two-column head “Book a call”, “15 min · Google Meet” sticker. Desktop calendar at right spans the heading/fallback-link rows; mobile stacks. Calendly onboarding URL and branded widget colors. Below: paper #inquiry two-column explanation/form. Fallback email and written-inquiry anchor remain accessible when widget fails. The final main intentionally hides cookie banner here. Migration must assess consent visibility as shared behavior, not blindly copy this suppression. |
/book-call | Final main returns branded 404; dev currently serves legacy scheduler. Migration deliberately uses a compatibility redirect to /contact; do not reproduce lost inbound links. |
/creator-guides and /:slug | Branded guide hub and reading pages, five guide records, categories/summary/updated information, readable prose sections, FAQs/related guide links, breadcrumb and Article schema. Content belongs in dev features/creator-guides/guideData.ts. A guide-level Discord invite differs from the public community and private-team invite; track separately. |
/clipping | Blue article head and date; “Clipping, defined.” definition block; five-step Process; FinalCta. The final launch removed the intermediate FAQ and case cards. No new backend interaction. |
/careers | Public recruitment head, three role tiles (Creator Management/Customer Success/Sales), View details opens matching dialog with fit, responsibilities, close and email button. Escape/backdrop closes. Email subject identifies role; no recruiting database. Add focus trap/return and background scroll lock in dev adaptation. |
/privacy, /terms | Cream header with title/effective version; paper prose; numbered anchor TOC at left, sticky top-28/260px desktop; stacked on mobile. Preserve CURRENT DEV document body, not main's obsolete provider clauses. Source visual shell is Legal.tsx. |
| Unknown marketing route | Source has branded noindex404. Migration skins invalid campaign/guide slugs via group not-found only; globally unknown URLs retain dev404. No broad catch-all or affiliate proxy change (explicit parity exception). |
Creator funnel
New public /creators, /creators/apply, /creators/start are acquisition/education routes, not /onboarding and not authenticated creator verification. Source: creators/_content.ts, _progress.ts, _actions.ts, _components/{Proof,Apply,Start,StartTransition}.tsx.
Landing's actual JSX is cream PageHead with creator-stat aside → Proof → CreatorSteps (including CTA) → creator FAQ. Contrary source comments are stale; no suitability section is mounted. Creator home reuses modules but has its own hero, logo rail and separate stat band. CreatorStats reads landing.heroStats: $600K+ paid out, 100M+ views in 30 days, $1,000+ single-clip payouts, with paper/orange/blue tiles respectively. CreatorSteps reads howItWorks: Create the content. → Upload it. → Get paid., with paper/orange/ink tiles. These are editorial claims, not live financial data; date/qualify them under11§6. Proof includes native UI-like payout/feed cards, earnings stories and five local lifestyle/clip images; retain provenance and publication limitations. CSS wall uses one column, two at640, three manually balanced columns at1100. Homepage creator stat band is three across at820; step cards become three at900.
Questionnaire contains nine questions (the source comment says eight): Whop experience; platforms (multi-select); links (required non-empty); posting cadence; last-30-day views; first online dollar; editor (“Other” text allowed); Roblox years; available weekly hours. Single answers advance immediately; multi/links/Other require Continue, last question submits. Back revisits prior answers; a time hint/progress bar replaces an explicit step count.
Scoring: any fast flag → fast; otherwise weekly AND views10k AND NOT starter → creator; otherwise starter. Fast flags come from earned-on-Whop or 100K+ views; starter flags include unfamiliar Whop/None yet/under 3 hours. Priority means a fast flag wins even with a starter flag. Store {track,links,answers,at} at bc-creator-application; lesson count at bc-creator-lessons. Return to apply shows accepted state; ?reset clears both. Source casts storage without validating its shape; migration must validate it.
Submission displays three cosmetic loader lines (“Checking your handle…”, “Scoring your answers…”, “Matching you to a track…”), then “You're in.” This is client scoring, not verified account inspection or approval. void submitApplication(...) does not await provider delivery. Fast/creator proceed to lessons; starter goes to https://whop.com/bloxclips/. Distinguish acceptance into an educational track from admission to a private group.
Lessons reuse all five guide bodies. An end-marker IntersectionObserver unlocks each comprehension check; correct answer unlocks next lesson. Completed lessons can be revisited; later ones remain locked. Final private-track button uses NEXT_PUBLIC_ROBLOX_GAMING_UGC_DISCORD_INVITE_URL. Missing configuration currently gives a REPLACE-WITH... link; migration must show unavailable state instead. There is no training video file/data yet; do not fabricate one. Local progress is bypassable, so cannot authorize membership or payment.
Optional intake: ROBLOX_GAMING_UGC_DISCORD_WEBHOOK_URL is server-only; sends track/links/answers in a Discord embed. Missing key or provider error returns ok:true, delivered:false. Adapt validation, bounded delivery and anti-abuse before enabling; do not infer durable storage or a new backend endpoint.
Motion, responsive and accessibility details
House ease (0.32,.72,0,1); graduated soft/bounce/pop curves; 200ms micro, 300ms hover, 600ms reveal. Lenis duration 1.1 seconds, anchors offset −80. Reveal observer threshold .05, bottom margin −12%, once only; late route/audience content observed. Reveal wrapper and hover-transform element must differ. Reduced motion must bypass scroll/reveal/rotating content, not leave it invisible.
Curtain destinations are exactly /contact and /creators/apply. Click-centered orange disc grows over 800ms; sticker at 260ms, headline 340ms; push at 350ms; minimum visible 1800ms; hold ≥250ms after destination commit; lift 700ms; stalled navigation cleanup at 4000ms. Modified clicks and reduced motion use normal links. Scope provider to marketing so product navigation cannot retain overlay or html attributes.
Breakpoints include 480, 640, 768, 820, 900, 1000, 1024 and 1100px, not just Tailwind defaults. Check both sides of custom thresholds. Case cards 1/2/4; brand stats 1/2; creator stats 1/3 at 820; proof 1/2/3; process/comparison/service content stack at narrow widths. Nav switches at 768; sidebar/large page-head grids at 1024; legal and lesson rails sticky only on wide layouts. Final source CSS at the end of site.css overrides earlier rules—retain effective cascade order.
SEO: final title BloxClips - Creator Distribution for Games, description includes gaming/Roblox, mass-distribution clipping/UGC and 100k+ creators; share asset /bloxclips-embed.png. _seo.ts produces canonical, OpenGraph/Twitter, page/Article/FAQ/Breadcrumb schemas and organization references. CONTENT_UPDATED=2026-09-15; source IS_LIVE=true must become safe for dev/preview deployment. Creator apply/start and 404 remain noindex. No new analytics vendor/event pipeline was added; preserve dev's telemetry guard.