Case study · Marketing site, 3D story and back office · October 2026
How we built infewmedia.com.
Shahriar Labs designed and built infewmedia.com, the website of Infew Media, an influencer marketing agency, in October 2026. One 3D lens travels the whole homepage story, yet the site works as plain HTML first and scored 100 in every Lighthouse mobile category on six pages, the homepage included.
Infew Media matches brands with the few creators their customers already trust. The site had one job: make a brand’s marketer trust the agency enough to book a call. Creators applying for paid deals came second, press third.
Agency sites usually argue with a wall of client logos. This one argues with a story about attention instead, and invites brands in with a founding-partner offer. Nothing on it is a number the agency cannot stand behind.
The idea
The few that move many, told by one lens.
Instead of a scene per section, a single 3D lens moves from chapter to chapter as the visitor scrolls, and every chapter is about what the lens is looking at.
01
Hero
The lens sits beside the headline, The few that move many. On a phone it crosses the headline as a small glowing dot.
02
The noise
A feed of ads that shout, rush past and go quiet, written in HTML, while one creator’s post stops in front of the lens.
03
Focus
The lens moves into the beam’s path: one message, many people.
04
The few
It hops between the few creators an audience already follows.
05
Founding partners
It drops into a phone, and the three shortlist slots fill as it lands.
06
Finale and footer
The lens closes, then settles on the footer logo as the dot of its i.
The noise: people scroll past, until one post stops them.The few: the lens picks out the creators an audience follows.On a phone.
Engineering
3D that never holds the page hostage.
Plain HTML first
Every section works as HTML and CSS before any script runs. Motion and 3D load after the first paint and are optional, so the story is readable with JavaScript off.
Three quality tiers
The site picks a tier once, at startup. Full gets the live scenes; a phone with little memory or few cores gets a lighter render; reduced motion, Save-Data or no WebGL2 gets still posters made from the real scenes. If the frame rate drops, the scene steps down on its own.
Hard budgets
First-visit JavaScript stays under 150 KB gzipped and everything before the 3D under 500 KB, checked by a script on every build, with Lighthouse run on four pages after each phase.
One canvas
A single WebGL canvas renders every scene through views, with the pixel ratio clamped, instead of a canvas per section fighting for the GPU.
Next.js static exportReact Three Fiber and three.jsGSAP ScrollTriggerLenisTailwind CSS v4Cloudflare Pages and Pages FunctionsNeon PostgresTiptap
Measured
100 on a phone, with the 3D on.
Lighthouse 13, mobile emulation, run twice per page on the production build served locally, October 29, 2026. Performance, Accessibility, Best Practices and SEO were 100 on every run, and Cumulative Layout Shift was 0.
Lighthouse mobile results for infewmedia.com
Page
Scores
LCP
Home (with 3D)
100 · 100 · 100 · 100
0.9 s
Services
100 · 100 · 100 · 100
0.8 s
Creators
100 · 100 · 100 · 100
0.8 s
Contact
100 · 100 · 100 · 100
0.8 s
Blog
100 · 100 · 100 · 100
0.8 s
A blog post
100 · 100 · 100 · 100
0.8 s
Back office
A static site that still takes inquiries.
Brand inquiries and creator applications post to Cloudflare Pages Functions, which validate them and store them in Neon Postgres with parameterized SQL.
The team signs in at /admin to read submissions and write the blog.
The blog editor is built on Tiptap: images, videos, link cards, tables, callouts, buttons, FAQs, cover images, SEO checks, autosave and saved versions.
Images are copied into the static build, so a page never waits on the database, and a video loads nothing from its platform until a reader presses play.
Questions
About this build.
Who built infewmedia.com?
Shahriar Labs designed and built infewmedia.com, the website of Infew Media, an influencer marketing agency, in October 2026. That covers the homepage story, the 3D lens, every page, the inquiry and creator forms, and the admin with its blog editor. Infew Media runs its own campaigns, creators and clients.
What is infewmedia.com built with?
Next.js as a static export on Cloudflare Pages, with React Three Fiber and three.js for the lens, GSAP ScrollTrigger and Lenis for the scroll story, and Tailwind CSS v4. Forms post to Cloudflare Pages Functions that store submissions in Neon Postgres, and the blog is written in a Tiptap editor inside the site’s admin.
Does the 3D slow the site down?
No. Every section is plain HTML and CSS first, and the 3D loads after the first paint. A device that asks for reduced motion or data saving, or has no WebGL2, gets still posters made from the real scenes. Lighthouse 13 on mobile scored 100 in all four categories on six pages, homepage included, on October 29, 2026.
Is Infew Media a Shahriar Labs product?
No. Infew Media is an influencer marketing agency in its own right. Shahriar Labs built its website and is credited in the site’s footer.
Can Shahriar Labs build a site like this for my brand?
Yes. Shahriar Labs takes on a small number of websites for other brands. Email [email protected] with your brand, the site you have now and what the new one must do.
Your brand next
Want a site like this?
Shahriar Labs takes on a small number of websites for other brands. Write to [email protected] with your brand, the site you have now and what it must do.
