Falcon

Live preview →

Falcon is the bold agency theme — stacking color-block case studies that pin on scroll, a full-bleed mega-menu, three marquee variants, char-shift hover micro-interactions, and a giant Anton type system. Best for independent design + dev studios, small agencies, brand-led freelancers, and white-label production teams.

Property	Value
Tier	Pro+ ($59 launch / $79 reg.)
Category	Agency / portfolio / blog
Body font	Inter Variable
Display font	Anton (tight condensed sans, uppercase)
Mono font	JetBrains Mono Variable (kickers, tag pills)
Brand accent	Yellow (#ffd640)
Variants	Light + dark (toggle in nav, persists per visitor)

Included pages

• / — homepage with type hero, featured-project image, logo marquee, stacking case studies, services, who-we-are, blog grid
• /work/ and /work/[slug]/ — filterable case-study index + detail pages
• /about/ — photo marquee, team grid with bio modals, values tabs with synchronized image swiper
• /services/ and /services/[slug]/ — service overview + dynamic sub-routes (web design, web development, digital platforms, partnerships, plus 10 specialty sub-services)
• /pricing/ — 3-tier engagement pricing (Sprint / Studio / Partnership) with FAQ
• /contact/ — form with “what happens next” sidebar, find-us map, FAQ
• /blog/ and /blog/[slug]/ — index + post pages
• /sections/ — live gallery of all 24 components with copy-paste snippets
• /privacy/, /terms/, /404

What makes Falcon different

• Stacking scroll case studies — GSAP ScrollTrigger pins each project card with a 24px peek; filter chips on /work/ kill and rebuild triggers so filtering never breaks the scroll behavior.
• Mega-menu nav — full-bleed colored panels per service category, noise-texture overlay, click-toggle with outside-click + ESC dismiss.
• Light + dark variants — sun/moon toggle in the nav, preference persists in localStorage, pre-paint script prevents FOUC.
• char-shift hover — every link auto-splits into per-character double-stacked spans; on hover both copies slide up so the duplicate fills the slot (no empty-text moment).
• Three marquee variants — logo strip (120s), photo strip (80s), and bottom CTA band (180s) — all infinite-scroll with prefers-reduced-motion respected.
• Lenis smooth scroll — wired to the GSAP ticker so wheel/trackpad smoothing and pinned cards stay in lockstep.

What’s next

• Configure → site.ts — every visible string and link on Falcon flows from this one file.
• Configure → Menu — mega-menu service panels live under navigation.megaMenu.panels. Each panel has its own background color, foreground color, tagline, and sub-link list.
• Customize → Section data — the team, valuesTabs, and servicesGrid blocks shape most of the personality.
• Customize → Pages — case studies live as MDX in src/content/work/. Frontmatter controls block color, variant (dark/light), stats, bullets, and the live-site link.