Skip to content
Silk UI
AgencyNew

Forma — AI studio & agency

An editorial, monochrome template for AI studios and technical agencies, with a live AI-agent session on a real iPhone mockup, a pinned three.js scene where 9,000 particles morph from raw data to a neural network as you scroll, scroll-reactive titles and duotone team portraits.

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Motion
  • Lenis
  • three.js
Live preview (opens in a new tab)Buy now $49$79

One-time payment · Instant download · All sales are final. By buying you agree to the License, Terms and Refund Policy.

silkui.com/page-preview/forma
Forma hero screenshot

Overview

Forma is a calm, editorial website for an AI studio, ML consultancy or technical agency. The hero floats a real iPhone mockup over misty dawn footage. On it, a black-and-white Forma agent takes a request, ticks through its tool calls one by one and lands a result card, on a loop. The phone tilts toward your cursor, and when you scroll it tips back and lifts away while the footage pushes in.

The rest of the page alternates light and charcoal sections:

  • a statement that lights up word by word
  • a stats bento
  • giant section titles that speed up and lean with your scroll speed
  • case-study cards with scroll parallax and a 3D tilt
  • an expanding capabilities accordion
  • a pinned three.js process scene: about 9,000 particles morph from a raw data cloud into a sphere, a neural network with travelling pulses and a rolling grid as you scroll through the four steps
  • duotone team portraits with hover bios

Highlights

  • Live agent demo on a real iPhone mockup that tilts away on scroll
  • three.js particle field: data → structure → network → scale, driven by scroll
  • Scroll-reactive giant titles, parallax and tilting case cards
  • Expanding capability panels and duotone team portraits

Screens

Impact bento
Forma impact bento screenshot
Capabilities
Forma capabilities screenshot
three.js process morph
Forma three.js process morph screenshot
Pricing
Forma pricing screenshot

What's included

  • iPhone agent hero
  • Impact bento
  • News ticker
  • Selected work
  • Capabilities
  • Vision
  • Client voices
  • Film dialog
  • Process (three.js scroll scene)
  • Team
  • Pricing
  • FAQ
  • Insights

Getting started

  1. Install dependencies

    npm install

  2. Run the dev server

    npm run dev   # http://localhost:5185

  3. Build the static site

    npm run build   # writes the site to out/

Deploying

npm run build produces a plain static site in out/ that runs on any static host.

License & credits

Photos and video are from Pexels and credited in the README. The brand, clients, team and quotes are fictional. Testimonials use initials.