Apsis — Marketing & growth agency

Overview#

Apsis is a bold, space-themed template for marketing, growth and creative agencies. Near-black backgrounds with neon-lime accents, green aurora glows, big grotesk headlines with italic-serif accents, and glowing outline pill buttons.

Everything is built on theme tokens, including the 3D scenes. Colours, radii and fonts live in one place as CSS variables, and every component reads from them, so you can rebrand the whole site by editing a dozen values or switching to one of the included presets (violet "ultraviolet" and warm "ember") with a single attribute.

• Hero: “Grow Beyond Gravity”, with an orbit drawn around the middle word, over a three.js planet: a dark world with city lights, a lime atmosphere, a ring of dust and shooting stars. It rises as you scroll and leans with your cursor. Beside it sits a working lead form with budget chips and a success state.
• Statement: a manifesto in mixed sans and italic serif whose words light up one by one as you scroll.
• Mission control: an earth-from-orbit video that opens up to full width as it scrolls in, with count-up stats.
• The 5 pillars: a pinned scroll scene. The screen holds while the camera flies around a planet to five orbiting satellites, lighting each one up with its pillar and description. Jump to any pillar from the step list.
• Results and work: tilted photo cards that swing in from the sides, a client marquee that speeds up and skews with your scroll, and a case-study carousel with a featured results card and hover stats.
• Journal, services and testimonials: article cards, an accordion of services on a gradient frame that reveals an image for each, and rotating quotes over an orbit drawing.
• CTA and footer: an accent band with a spinning text badge, and a newsletter footer on an aurora glow.

Highlights#

• Theme tokens: every colour, radius and font comes from CSS variables, with violet and ember presets you switch with one attribute
• three.js planet with a glowing atmosphere, city lights, a dust ring and shooting stars; it rises as you scroll and leans with the cursor
• Pinned scroll scene: the camera flies around a planet to five orbiting satellites, one for each step of your process
• Scroll-lit statement, a velocity marquee, magnetic buttons, an earth video that opens up on scroll, case studies, a journal and contact form

Screens#

What's included#

• three.js planet hero & lead form
• Scroll-lit statement
• Earth-from-orbit video with stats
• Pinned 3D orbit of 5 pillars
• Tilted results cards & velocity marquee
• Case-study carousel
• Journal preview
• Services accordion with images
• Testimonials
• Accent CTA with spinning badge
• Newsletter footer

Getting started#

1. Install dependencies

   npm install
   

2. Run the dev server

   npm run dev   # http://localhost:5192
   

3. Change the theme

   Edit the tokens at the top of src/app/globals.css, or add data-theme="ultraviolet" or data-theme="ember" to <html> in src/app/layout.tsx.

4. Build the static site

   npm run build   # writes the site to out/
   

Deploying#

npm run build produces a plain static site in out/, including every case study and article, and runs on any static host. Connect the lead, contact and newsletter forms to your CRM, Formspree or your own API.

License & credits#

The video and photos are free Pexels media, resized or re-encoded for the web and credited in the README. Fonts are Inter Tight, Instrument Serif and Archivo, all free under the SIL Open Font License. Apsis, its clients, people, figures and quotes are fictional.