Cinematic Sites Workflow

Workflow & Automation

View Detail
Back

An in-house workflow built inside my RUBRIC operations dashboard that transforms any business website into a cinematic experience in four steps. Step 1 — deep brand analysis from a single URL: tone, palette, typography, hero scene. Step 2 — AI-generated hero animations using Nano Banana 2 (Gemini image) for the still and Kling 3.0 Pro for the looping video. Step 3 — assembly of cinematic modules from a curated component library, preserving the client's existing design language. Step 4 — automatic deployment with a live URL ready to share. Every step is orchestrated by my Alpha build agent and streams progress events live to the RUBRIC console, so I can see exactly what's happening from brief to deployment.

Type
Workflow & Automation
Role
Workflow Architect
Service
AI Workflow Design / Web Development / Brand Strategy
Year
2026

Project Overview

Cinematic Sites is a complete in-house workflow that takes a client's existing website and rebuilds it as a cinematic experience — without losing the brand's identity. It runs inside RUBRIC, my personal operations dashboard, and is driven by the Alpha build agent.

From a single URL to a deployed live site in four steps. No templates, no theme swaps — every cinematic site is anchored in a deep brand analysis and uses AI-generated hero imagery tailored to that specific business.

The Four Steps

  1. Brand Analysis — Extract tone, palette, typography, voice, and a hero scene concept from the client's existing site
  2. AI Hero Generation — Generate a hero still with Nano Banana 2, then a looping hero video with Kling 3.0 Pro that matches the brand's mood
  3. Cinematic Module Assembly — Compose pages from a curated library of cinematic modules (scroll-driven sections, parallax reveals, video heros) while preserving the client's design language
  4. Deployment — Auto-deploy with a live URL ready to hand off

Key Features

  • Single-Command Trigger: One CLI call kicks off the entire pipeline from brand analysis to deploy
  • Live Progress Events: Every step posts to the RUBRIC Flows console so progress is visible in real time
  • Brand-Faithful: AI assets are generated for the brand, not from a template — Nano Banana prompts are tuned from the brand analysis output
  • Curated Module Library: Cinematic sections (parallax heros, scroll-driven typography, video looped backgrounds) reused across projects but composed uniquely per build
  • Free-Tier Friendly: Designed to deploy on a free preview plan for client review, then upgrade only when needed

Technologies Used

  • Nano Banana 2 (Gemini): Hero still image generation
  • Kling 3.0 Pro: Looping hero video generation
  • Next.js: Site framework with App Router
  • GSAP + ScrollTrigger: Cinematic scroll animations
  • Auto-deployment: Single-command deploy to a live preview URL
  • RUBRIC Console: Workflow orchestration, progress streaming, asset gallery

Outcome

A repeatable production process that takes me from "client URL" to "deployed cinematic site" in a single sitting, with AI doing the heavy creative lifting on hero assets while I focus on composition and brand integrity. Used internally on every cinematic site I ship.