Torque — Performance marketing agency

Overview#

Torque is a dark, molten-orange template for performance marketing and paid media agencies. Burnt-black surfaces, molten glows, smoked-glass cards and tight uppercase headlines give it the confident, high-contrast feel of an agency that reports on revenue, not reach.

The page is built around real 3D and interaction:

• Liquid-metal knot (three.js): the hero object is a glossy black knot lit from behind by molten rim lights. It turns towards the cursor, breathes slowly and unwinds as the page scrolls.
• 3D service icons: each molten service card has its own glossy 3D icon (magnifier, heart, play button, camera) that tilts towards the cursor and reveals what's included.
• 3D growth funnel: a pinned scroll scene where molten particles pour through a glossy funnel. The camera rides from the lip to the spout as the four stages (attract, engage, convert, scale) light up one by one.
• Budget simulator: sliders split a monthly budget across channels; glossy 3D columns spring to the new values while leads, revenue and return update live.
• Live ads dashboard: KPIs tick while it's on screen, campaigns switch on and off, and the revenue chart morphs between 7, 30 and 90 days.
• Case studies: switch between three campaigns; the growth curve draws itself and every case links to a full case study page.
• Ad creatives: a draggable rail of phones shows each ad as a Reel, a Story or an in-feed post.
• And more: a scroll-reactive results ticker, a Torque vs. typical agency table, pricing with a monthly/quarterly switch, a team grid that warms to colour on hover, a founder "stage" screen that tilts upright as it scrolls in, count-up stats, a platform marquee, an FAQ, reviews by business type and a free-audit form with validation.

Highlights#

• three.js glossy black knot with molten rim lights that turns to the cursor, breathes and unwinds as you scroll
• Pinned 3D growth funnel with molten particles pouring through it as you scroll
• Budget simulator with three.js columns, a live ads dashboard, pricing and a comparison table
• Molten service cards with their own glossy 3D icons that tilt on hover
• Case study tabs with a growth curve that draws itself, plus a full page for every case study
• A draggable rail of phones showing each ad as a Reel, Story or in-feed post, with cobalt and magenta presets

Screens#

What's included#

• Liquid-metal knot hero
• Trusted platforms marquee
• Founder stage & stats
• 3D services
• Case studies
• Ad creatives
• FAQ
• Reviews
• Free-audit form

Getting started#

1. Install dependencies

   npm install
   

2. Run the dev server

   npm run dev   # http://localhost:5197
   

3. Make it yours

   All copy, services, case studies, creatives, reviews and FAQ live in src/content.ts. Edit the tokens at the top of src/app/globals.css, or add data-theme="cobalt" or data-theme="magenta" to <html> in src/app/layout.tsx. The 3D follows the theme.

4. 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. The audit form is front-end only; connect it to your CRM.

License & credits#

Photos are free Pexels images, graded to the theme and credited in the README. Fonts are Schibsted Grotesk and Inter (SIL Open Font License). Platform names are plain text; no third-party logos are used. Torque, its clients, people and figures are fictional.