Triad: A cinematic studio website its own team can edit

01 / Overview

About Triad

02 / The challenge

What Triad needed to solve

Buyers judge a studio in a few seconds, on motion, imagery and tone, and a template site rarely passes that test. Triad needed a cinematic custom front end and an easy way to edit it.

1. 01

   The first impression had to feel as cinematic as the film and image work the studio sells.

2. 02

   Triad's Synapse process, where human intent leads and AI handles scale, had to be explained clearly on the site.

3. 03

   Campaigns go live, services are renamed and logos are updated often. A ready-made content system would flatten the design, but sending every change through a developer leaves the site behind.

4. 04

   Once staff saved a change, it had to show up on the live site soon after.

03 / What we built

How we built Triad

We built a Next.js and TypeScript site with an Express and MongoDB API behind it, plus a private admin panel where most pages are edited through one shared section editor.

• 01

  Cinematic home page

  The home page opens with a full-screen hero and an animated image carousel. Its main media can be an image or an uploaded video that keeps looping as the page scrolls, while the overlay title, subtitle and button fade out.

• 02

  Motion across the site

  Framer Motion drives animated heroes, a scroll grid, a circular gallery and a custom video player. Everything sits in Triad's red, black and white.

• 03

  Synapse page

  A dedicated page explains Triad's three-layer system of human intent, AI workflow and output, and shows how an idea moves from intent to workflow, adaptation and execution.

• 04

  Work and case studies

  The Work page filters projects by image, film, campaign and infrastructure. Each case study has its own page with client facts, results, the approach and a gallery of project photos and video.

• 05

  Shared section editor

  Most pages are edited through one editor that reads a list of fields from the API and draws the right control for each, such as text, rich text, images, links or on and off switches. Every section is labeled with where it appears on the live site.

• 06

  Content dashboard and settings

  Staff pick a page or section from a content dashboard and edit the home, work, Synapse and contact pages, the three services, announcements, the header logo and footer links. Admin sign-in uses signed login tokens, and the API checks every input on the server.

• 07

  Media pipeline

  Uploaded images are resized with Sharp, phone photos in HEIC are converted to WebP and SVG logos are stored untouched. Videos up to 200 MB go to DigitalOcean Spaces and are served through its CDN.

• 08

  Server-rendered pages that stay fresh

  Public content is rendered with server components, with the site's own sitemap and social metadata. After every save the admin panel clears the matching cache, so changes appear on the live site soon after.

04 / The results

What changed for Triad

Triad now has a website that looks as good as the work it sells, and staff can change nearly all of it from a browser.

• Staff edit nearly all text, images, videos, logos, services and case studies themselves, without a developer.
• Each saved edit reaches the live site soon after, because the matching cache is cleared on save.
• Pages are fetched on the server, so visitors get the real content in the first paint.
• Every project is shown with its media, process and results on its own case study page.
• Phone photos, logos and large videos can be uploaded as they are, and the media pipeline prepares them for the site.