Skip to content
Silk UI
AgencyNew

Volta — Growth marketing agency

A bold acid-lime template for marketing and growth agencies: a live WebGL hero portrait with a duotone cursor lens, a pinned three.js scene where 1,400 bars turn from noise into a barcode and then a growth chart, lookbook case studies, a growth estimator and buttery smooth scrolling. Every colour, including the 3D, comes from theme tokens.

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

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

silkui.com/page-preview/volta
Volta hero screenshot

Overview

Volta is a bold, acid-lime template for marketing, branding and growth agencies. Deep green-black surfaces, a lime accent, tall Bebas Neue headlines, editorial fashion photography and round magnetic call-to-action buttons give it the confident feel of a studio that ships campaigns, not decks.

It moves smoothly from the first frame, with two real 3D pieces at its heart:

  • Live portrait (WebGL): the hero photo is a shader. A soft lens follows the cursor, turns the image into a duotone of the theme colours, ripples gently and splits its colour channels as you move. Every input is damped, so it never jitters.
  • Not guesswork (three.js): a pinned scroll scene where about 1,400 lime bars start as a noisy cloud, line up into a barcode, then rise into a growth chart as the camera swings around them. The scroll is damped inside the scene, so it glides even with a notched mouse wheel.
  • Growth estimator: pick an industry, a monthly budget and an optimisation rate to see projected leads, customers, revenue and return on ad spend, with a six-month chart.
  • And more: a photo pill that widens inside the "Why choose us" headline, a services marquee, lime service cards that turn over to show deliverables, lookbook case studies, round team portraits with sliding lime discs, monthly/yearly pricing and validated contact forms.

Pages: a case study page for every client, with results, the challenge, what was done and a link to the next case.

Highlights

  • WebGL hero portrait: a soft lens follows the cursor, turns the photo into a duotone of the theme colours and ripples smoothly
  • Pinned three.js scene: about 1,400 bars move from a noisy cloud to a barcode to a rising growth chart as you scroll
  • Growth estimator with industry, budget and optimisation sliders, live projections and a six-month chart
  • Lookbook case studies with their own pages, lime service cards, magnetic round CTAs and coral and violet presets

Screens

Not guesswork: 3D bar field
Volta not guesswork: 3d bar field screenshot
Lime service cards
Volta lime service cards screenshot
Lookbook case studies
Volta lookbook case studies screenshot
Growth estimator
Volta growth estimator screenshot

What's included

  • WebGL portrait hero
  • Manifesto & marquee
  • Why choose us & stats
  • Not guesswork (3D)
  • Services
  • Case studies
  • Growth estimator
  • Consultation form
  • Team
  • Pricing
  • FAQ
  • Closing CTA

Getting started

  1. Install dependencies

    npm install

  2. Run the dev server

    npm run dev   # http://localhost:5196

  3. Make it yours

    All copy, services, case studies, team, plans and FAQ live in src/content.ts. Edit the tokens at the top of src/app/globals.css, or add data-theme="coral" or data-theme="violet" to <html> in src/app/layout.tsx. Both 3D scenes follow 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 forms are front-end only; connect them to your CRM or email service.

License & credits

Photos are free Pexels images, graded to the theme and credited in the README. Fonts are Bebas Neue and Manrope (SIL Open Font License). Volta, its clients, people and figures are fictional.