01 The Challenge
A Premium Design Studio Needed A Landing Page That Proves Its Craft In Seconds, Cinematic Motion Without Sacrificing Speed, Accessibility Or SEO.
Case Study · 04 / Design Studio Landing Page
Infinify
A Cinematic Landing Page For Infinify, A Premium Design Studio For B2B & Startups, Designed And Built In Two Weeks With Nine Reusable Motion Primitives.
Landing Page Design & Development ·
- 01 · Client
- Infinify · France
- 02 · Category
- Design Studio
- 03 · Timeline
- 2 Weeks · 2026
- 04 · Scope
- Landing Page
- 05 · Stack
- Next.js 16 · Motion
01 · By The Numbers
The Build,
By The Numbers
Counted Straight From The Codebase And Git History. No Vanity Metrics, No Projections.
7
Page Sections
Loader To Footer
9
Motion Primitives
Reveal · BlurWords · CountUp…
10
FAQs
With FAQPage Structured Data
64
Commits
Two Weeks, July 2026
02 · Overview
Craft You Can
Feel In Seconds
02 Our Approach
We Designed A Dark, Glassy System Around An Earth-From-Orbit Hero, Then Built Nine Reusable Motion Primitives: Pinned Reveals, Draggable Marquees And Hover Scenes.
03 The Outcome
A Statically Rendered Next.js Site With Structured Data, AVIF Imagery, Video That Streams Only On Play, And Full Reduced-Motion Support.
03 · What We Built
Seven Sections,
Nine Motion Primitives
Every Interaction Is A Reusable Component, So The Studio Can Keep Building Pages In The Same Language.
Infinity Loader
The Infinity Mark Draws Itself By Hand In About Two Seconds, Then Lifts Away Like A Curtain To Reveal The Hero.
Draggable Portfolio
Two Opposing Marquee Rows Of Design Shots And Mux-Streamed Showreels, With A Lightbox.
Pinned Statement
The About Statement Pins And Reveals Word By Word As You Scroll, Over An Infinity Watermark.
Process Scenes
Three Cards With Replayable Hover Scenes, Including A Live-Counting Revenue Chip.
SEO & Performance
JSON-LD, Open Graph, AVIF/WebP, A Preloaded Hero Image, Deferred hls.js And Reduced-Motion Paths.
04 · Architecture
Static By Default,
Streamed On Demand
A Fully Static Next.js Build: Content Lives In Typed Modules, Motion In Reusable Primitives, And Heavy Media Streams In Only When Played.
- Sync · REST / GraphQL
- Async · Kafka Events
- Service Node
3 Routes · 16 Components · Static Rendering
Read The Architecture As Text
- Visitors
- Browsers (Mobile · Desktop · 4K), Search & AI (JSON-LD · Sitemap)
- Edge
- Next.js 16 (Static App Router), next/image (AVIF · WebP)
- Components
- Sections (7 Page Sections), Motion Kit (9 Primitives), Lenis (Smooth Scroll), Content (Typed Site + FAQ Data)
- Services
- Mux (HLS Showreels), Cal.com (15-Min Booking), WhatsApp (Direct Chat), Instagram (Social)
05 · Stack
The Stack,
And The Code
A Modern, Static Front-End Stack. Every Byte Of Motion Justified, Every Image Optimised.
- 01 Frontend
- Next.js 16
- React 19
- TypeScript
- 02 Styling
- Tailwind CSS 4
- SF Pro
- Space Mono
- 03 Motion
- Motion 12
- Lenis
- CSS Keyframes
- 04 Media
- Mux
- hls.js
- next/image
- 05 SEO
- JSON-LD
- Open Graph
- Sitemap
- 06 Tooling
- ESLint 9
- PostCSS
export default function About() { const sectionRef = useRef<HTMLElement>(null); const [revealed, setRevealed] = useState(0); const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start start", "end end"], }); // Reveal completes at 92% of the pin so the full statement reads black // before the section releases. The lead word counts too, so the very first // frame shows NO highlighted word. const toCount = (v: number) => Math.round(Math.min(1, v / 0.92) * (REST_WORDS.length + 1)); useMotionValueEvent(scrollYProgress, "change", (v) => { setRevealed(toCount(v)); });$ next build→ ○ / ○ /privacy ○ /terms (Static)06 · PageSpeed
Fast, Accessible,
Found In Search
Google PageSpeed Insights Scores For infinify.eu: Speed, Accessibility And SEO Engineered In From Day One.
- 97Performance
- 100Accessibility
- 100Best Practices
- 100SEO
Have A Product
In Mind?
Tell Us What You’re Building. We’ll Reply Within One Business Day With A Scoped Plan.