cinematic-web 0.1.0

package/assets/templates/base-react/src/sections/Pricing.jsx

@@ -0,0 +1,135 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { Check } from 'lucide-react'
+
+const TIERS = [
+  {
+    name: 'Essential',
+    price: '$0',
+    period: 'forever',
+    description: 'Start your journey. No commitments.',
+    features: ['Core access', 'Basic analytics', 'Community support', '1 active project'],
+    cta: 'Get started',
+    highlighted: false,
+  },
+  {
+    name: 'Pro',
+    price: '$49',
+    period: 'per month',
+    description: 'For practitioners who demand precision.',
+    features: ['Everything in Essential', 'Advanced analytics', 'Priority support', 'Unlimited projects', 'API access'],
+    cta: '{{cta}}',
+    highlighted: true,
+  },
+  {
+    name: 'Enterprise',
+    price: 'Custom',
+    period: 'contact us',
+    description: 'Tailored solutions for organizations.',
+    features: ['Everything in Pro', 'Dedicated support', 'SLA guarantee', 'Custom integrations', 'White-label option'],
+    cta: 'Talk to us',
+    highlighted: false,
+  },
+]
+
+export default function Pricing() {
+  const sectionRef = useRef(null)
+  const cardsRef = useRef([])
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      gsap.from(cardsRef.current, {
+        y: 50,
+        opacity: 0,
+        duration: 0.9,
+        ease: 'power3.out',
+        stagger: 0.15,
+        scrollTrigger: {
+          trigger: sectionRef.current,
+          start: 'top 75%',
+          toggleActions: 'play none none none',
+        },
+      })
+    }, sectionRef)
+    return () => ctx.revert()
+  }, [])
+
+  return (
+    <section
+      ref={sectionRef}
+      id="pricing"
+      className="py-24 md:py-32 px-8 md:px-16 lg:px-24"
+      style={{ background: 'var(--color-background)' }}
+    >
+      <div className="max-w-6xl mx-auto">
+        <p className="font-data text-xs tracking-widest uppercase mb-4" style={{ color: 'var(--color-accent)' }}>
+          Membership
+        </p>
+        <h2 className="font-heading font-bold text-4xl md:text-5xl mb-16 tracking-tight" style={{ color: 'var(--color-dark)' }}>
+          Choose your tier.
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
+          {TIERS.map((tier, i) => (
+            <div
+              key={i}
+              ref={(el) => { cardsRef.current[i] = el }}
+              className={`rounded-3xl p-8 flex flex-col relative overflow-hidden ${
+                tier.highlighted ? 'md:-mt-4 md:-mb-4' : ''
+              }`}
+              style={{
+                background: tier.highlighted ? 'var(--color-primary)' : 'var(--color-dark)',
+                border: tier.highlighted ? '1px solid var(--color-accent)' : '1px solid rgba(255,255,255,0.06)',
+              }}
+            >
+              {tier.highlighted && (
+                <div
+                  className="absolute top-4 right-4 font-data text-xs tracking-widest uppercase px-3 py-1 rounded-full"
+                  style={{ background: 'var(--color-accent)', color: 'white' }}
+                >
+                  Popular
+                </div>
+              )}
+
+              <p className="font-data text-xs tracking-widest uppercase mb-4" style={{ color: 'var(--color-accent)' }}>
+                {tier.name}
+              </p>
+              <div className="mb-2">
+                <span className="font-heading font-bold text-4xl text-white">{tier.price}</span>
+                <span className="font-data text-sm text-white/40 ml-2">/ {tier.period}</span>
+              </div>
+              <p className="font-heading text-sm text-white/50 mb-8 leading-relaxed">
+                {tier.description}
+              </p>
+
+              <ul className="space-y-3 mb-10 flex-1">
+                {tier.features.map((feat, fi) => (
+                  <li key={fi} className="flex items-center gap-3">
+                    <Check size={14} style={{ color: 'var(--color-accent)', flexShrink: 0 }} />
+                    <span className="font-heading text-sm text-white/70">{feat}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <a
+                href="#"
+                className="btn-magnetic relative flex items-center justify-center w-full py-3 rounded-2xl text-sm font-semibold font-heading overflow-hidden"
+                style={{
+                  background: tier.highlighted ? 'var(--color-accent)' : 'rgba(255,255,255,0.06)',
+                  color: 'white',
+                }}
+              >
+                <span
+                  className="btn-fill"
+                  style={{ background: tier.highlighted ? 'rgba(255,255,255,0.15)' : 'var(--color-accent)' }}
+                />
+                <span className="relative z-10">{tier.cta}</span>
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/assets/templates/base-react/src/sections/Protocol.jsx

@@ -0,0 +1,123 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+const STEPS = [
+  {
+    number: '01',
+    title: '{{protocolStep0Title}}',
+    description: '{{protocolStep0Desc}}',
+    tag: 'Intake',
+  },
+  {
+    number: '02',
+    title: '{{protocolStep1Title}}',
+    description: '{{protocolStep1Desc}}',
+    tag: 'Analysis',
+  },
+  {
+    number: '03',
+    title: '{{protocolStep2Title}}',
+    description: '{{protocolStep2Desc}}',
+    tag: 'Delivery',
+  },
+]
+
+export default function Protocol() {
+  const sectionRef = useRef(null)
+  const cardsRef = useRef([])
+  const stickyContainerRef = useRef(null)
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const cards = cardsRef.current
+
+      cards.forEach((card, i) => {
+        if (i === 0) return // First card stays static on top
+
+        // Cards below: scale + blur + fade as scroll brings them down
+        gsap.to(cards.slice(0, i), {
+          scale: 1 - (i * 0.04),
+          filter: `blur(${i * 6}px)`,
+          opacity: 1 - (i * 0.25),
+          ease: 'none',
+          scrollTrigger: {
+            trigger: card,
+            start: 'top top',
+            end: 'bottom top',
+            scrub: true,
+          },
+        })
+      })
+    }, sectionRef)
+
+    return () => ctx.revert()
+  }, [])
+
+  return (
+    <section
+      ref={sectionRef}
+      id="protocol"
+      className="py-24 md:py-32"
+      style={{ background: 'var(--color-background)' }}
+    >
+      <div className="px-8 md:px-16 lg:px-24 max-w-6xl mx-auto mb-16">
+        <p className="font-data text-xs tracking-widest uppercase mb-4" style={{ color: 'var(--color-accent)' }}>
+          The Protocol
+        </p>
+        <h2 className="font-heading font-bold text-4xl md:text-5xl tracking-tight" style={{ color: 'var(--color-dark)' }}>
+          How it works.
+        </h2>
+      </div>
+
+      {/* Sticky stacking archive */}
+      <div ref={stickyContainerRef} className="relative">
+        {STEPS.map((step, i) => (
+          <div
+            key={i}
+            ref={(el) => { cardsRef.current[i] = el }}
+            className="sticky top-0 min-h-screen flex items-center justify-center px-8 md:px-16 lg:px-24"
+            style={{ paddingTop: `${i * 2}rem` }}
+          >
+            <div
+              className="w-full max-w-4xl rounded-3xl md:rounded-[3rem] p-10 md:p-16 relative overflow-hidden"
+              style={{
+                background: i % 2 === 0 ? 'var(--color-dark)' : 'var(--color-primary)',
+                minHeight: '60vh',
+              }}
+            >
+              {/* Step number */}
+              <span
+                className="absolute top-8 right-10 font-data text-6xl md:text-8xl font-bold select-none"
+                style={{ color: 'rgba(255,255,255,0.06)' }}
+              >
+                {step.number}
+              </span>
+
+              {/* Tag */}
+              <span
+                className="inline-block font-data text-xs tracking-widest uppercase px-3 py-1 rounded-full mb-8"
+                style={{
+                  color: 'var(--color-accent)',
+                  border: '1px solid var(--color-accent)',
+                }}
+              >
+                {step.tag}
+              </span>
+
+              {/* Content */}
+              <div className="max-w-xl">
+                <h3 className="font-heading font-bold text-3xl md:text-4xl text-white mb-6 tracking-tight">
+                  {step.title}
+                </h3>
+                <p className="font-heading text-white/50 text-lg leading-relaxed">
+                  {step.description}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}

package/assets/templates/base-react/tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--color-primary)',
+        accent: 'var(--color-accent)',
+        background: 'var(--color-background)',
+        dark: 'var(--color-dark)',
+      },
+      fontFamily: {
+        heading: 'var(--font-heading)',
+        drama: 'var(--font-drama)',
+        data: 'var(--font-data)',
+      },
+      borderRadius: {
+        '2xl': '1rem',
+        '3xl': '1.5rem',
+        '4xl': '2rem',
+        '5xl': '2.5rem',
+      },
+    },
+  },
+  plugins: [],
+}

package/assets/templates/base-react/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})

package/assets/templates/three-fiber/eslint.config.js

@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])

package/assets/templates/three-fiber/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{brand}}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="{{googleFonts}}" rel="stylesheet" />
+    <style>html,body{margin:0;padding:0;background:{{palette.background}};overflow-x:hidden;}</style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/assets/templates/three-fiber/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{brand-slug}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.1",
+    "@react-three/postprocessing": "^3.0.4",
+    "@studio-freight/lenis": "^1.0.42",
+    "gsap": "^3.15.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "three": "^0.184.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^3.4.17",
+    "vite": "^8.0.12"
+  }
+}

package/assets/templates/three-fiber/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/assets/templates/three-fiber/src/App.jsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { SceneProvider, useScene } from './context/SceneContext'
+import Scene from './components/Scene'
+import Navbar from './sections/Navbar'
+import Hero from './sections/Hero'
+import TheOldWay from './sections/TheOldWay'
+import ValueProps from './sections/ValueProps'
+import HowItWorks from './sections/HowItWorks'
+import SocialProof from './sections/SocialProof'
+import CTA from './sections/CTA'
+
+// Scene section top offsets (6 scenes × 100vh = 600vh total)
+const SCENE_TOPS = ['0vh', '100vh', '200vh', '300vh', '400vh', '500vh']
+
+function AppInner() {
+  const containerRef = useRef(null)
+  const { setProgress } = useScene()
+
+  useEffect(() => {
+    const trigger = ScrollTrigger.create({
+      trigger: containerRef.current,
+      start: 'top top',
+      end: 'bottom bottom',
+      scrub: true,
+      onUpdate: (self) => setProgress(self.progress),
+    })
+    return () => trigger.kill()
+  }, [setProgress])
+
+  return (
+    <>
+      {/* Fixed 3D canvas — background layer */}
+      <div className="fixed inset-0 z-0">
+        <Scene />
+      </div>
+
+      {/* Navbar — above canvas */}
+      <Navbar />
+
+      {/* 600vh scroll container — sections positioned absolutely inside */}
+      <div ref={containerRef} className="relative" style={{ height: '600vh' }}>
+        <Hero       style={{ top: SCENE_TOPS[0] }} />
+        <TheOldWay  style={{ top: SCENE_TOPS[1] }} />
+        <ValueProps style={{ top: SCENE_TOPS[2] }} />
+        <HowItWorks style={{ top: SCENE_TOPS[3] }} />
+        <SocialProof style={{ top: SCENE_TOPS[4] }} />
+        <CTA        style={{ top: SCENE_TOPS[5] }} />
+      </div>
+    </>
+  )
+}
+
+export default function App() {
+  return (
+    <SceneProvider>
+      <AppInner />
+    </SceneProvider>
+  )
+}

package/assets/templates/three-fiber/src/components/CameraRig.jsx

@@ -0,0 +1,42 @@
+import { useRef } from 'react'
+import { useFrame, useThree } from '@react-three/fiber'
+import * as THREE from 'three'
+import { useScene } from '../context/SceneContext'
+
+// 7 control points: one per scene transition + start/end
+const CAMERA_PATH = new THREE.CatmullRomCurve3([
+  new THREE.Vector3(0,  0,  20),   // Scene 1 start: far back
+  new THREE.Vector3(0,  2,  12),   // Scene 1 end: network revealed
+  new THREE.Vector3(-3, 0,  10),   // Scene 2: wide shot
+  new THREE.Vector3(0, -1,   7),   // Scene 3: tight center
+  new THREE.Vector3(2,  1,   5),   // Scene 4: inside network
+  new THREE.Vector3(-2, 3,   9),   // Scene 5: nebula angle
+  new THREE.Vector3(0,  0,  18),   // Scene 6: full pull-back
+], false, 'catmullrom', 0.5)
+
+const LOOK_TARGET = new THREE.Vector3()
+const LOOK_OFFSET = 0.02
+
+export default function CameraRig() {
+  const { camera } = useThree()
+  const { progress } = useScene()
+  const smoothProgress = useRef(0)
+
+  useFrame((_, delta) => {
+    // Lerp scroll progress for cinematic smoothness
+    smoothProgress.current = THREE.MathUtils.lerp(
+      smoothProgress.current,
+      progress,
+      Math.min(1, delta * 3)
+    )
+
+    const p = smoothProgress.current
+    const ahead = Math.min(1, p + LOOK_OFFSET)
+
+    CAMERA_PATH.getPoint(p, camera.position)
+    CAMERA_PATH.getPoint(ahead, LOOK_TARGET)
+    camera.lookAt(LOOK_TARGET)
+  })
+
+  return null
+}

package/assets/templates/three-fiber/src/components/NetworkGraph.jsx

@@ -0,0 +1,120 @@
+import { useRef, useMemo, useEffect } from 'react'
+import { useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+import { useScene } from '../context/SceneContext'
+
+// NODE_COLORS use palette tokens — replaced at scaffold time
+const NODE_COLORS = {
+  idle:    new THREE.Color('{{palette.accent}}'),
+  dark:    new THREE.Color(0x2A2A3A),
+  success: new THREE.Color(0x10B981),
+  glow:    new THREE.Color('{{palette.accent}}'),
+}
+
+// Fibonacci sphere — evenly distributes N points on sphere surface
+function fibonacciSphere(count, radius) {
+  const positions = []
+  const phi = Math.PI * (Math.sqrt(5) - 1)
+  for (let i = 0; i < count; i++) {
+    const y = 1 - (i / (count - 1)) * 2
+    const r = Math.sqrt(1 - y * y)
+    const theta = phi * i
+    positions.push(new THREE.Vector3(
+      Math.cos(theta) * r * radius,
+      y * radius,
+      Math.sin(theta) * r * radius
+    ))
+  }
+  return positions
+}
+
+// Build connection pairs (nodes within 2.5 units, capped at maxPairs)
+function buildConnections(positions, maxPairs = 2000) {
+  const pairs = []
+  const subset = positions.slice(0, 200)
+  for (let i = 0; i < subset.length && pairs.length < maxPairs; i++) {
+    for (let j = i + 1; j < subset.length && pairs.length < maxPairs; j++) {
+      if (positions[i].distanceTo(positions[j]) < 2.5) {
+        pairs.push(i, j)
+      }
+    }
+  }
+  return pairs
+}
+
+export default function NetworkGraph({ lowEnd = false }) {
+  const COUNT = lowEnd ? 200 : 1000
+  const meshRef = useRef()
+  const linesRef = useRef()
+  const { sceneIndex } = useScene()
+  const colorRef = useRef(new THREE.Color())
+
+  const { positions, connectionPairs } = useMemo(() => {
+    const pos = fibonacciSphere(COUNT, 8)
+    const pairs = buildConnections(pos)
+    return { positions: pos, connectionPairs: pairs }
+  }, [COUNT])
+
+  // Set initial instance matrices
+  useEffect(() => {
+    if (!meshRef.current) return
+    const dummy = new THREE.Object3D()
+    positions.forEach((pos, i) => {
+      dummy.position.copy(pos)
+      const isHub = i % 50 === 0
+      dummy.scale.setScalar(isHub ? 0.12 : 0.06)
+      dummy.updateMatrix()
+      meshRef.current.setMatrixAt(i, dummy.matrix)
+    })
+    meshRef.current.instanceMatrix.needsUpdate = true
+  }, [positions])
+
+  // Connection line geometry
+  const lineGeometry = useMemo(() => {
+    const geo = new THREE.BufferGeometry()
+    const verts = []
+    for (let k = 0; k < connectionPairs.length; k += 2) {
+      const a = positions[connectionPairs[k]]
+      const b = positions[connectionPairs[k + 1]]
+      if (a && b) verts.push(a.x, a.y, a.z, b.x, b.y, b.z)
+    }
+    geo.setAttribute('position', new THREE.Float32BufferAttribute(verts, 3))
+    return geo
+  }, [positions, connectionPairs])
+
+  // Scene-driven color transitions each frame
+  useFrame(() => {
+    if (!meshRef.current) return
+    const c = colorRef.current
+    for (let i = 0; i < COUNT; i++) {
+      if (sceneIndex === 1) {
+        c.copy(NODE_COLORS.dark)
+      } else if (sceneIndex >= 2) {
+        const activated = i < (sceneIndex - 1) * (COUNT / 4)
+        c.copy(activated ? NODE_COLORS.success : NODE_COLORS.idle)
+      } else {
+        c.copy(NODE_COLORS.idle)
+      }
+      meshRef.current.setColorAt(i, c)
+    }
+    if (meshRef.current.instanceColor) {
+      meshRef.current.instanceColor.needsUpdate = true
+    }
+  })
+
+  const lineOpacity = sceneIndex === 1 ? 0.05 : sceneIndex >= 2 ? 0.4 : 0.2
+  const lineColor   = sceneIndex >= 2 ? '#22D3EE' : '{{palette.accent}}'
+
+  return (
+    <group>
+      <instancedMesh ref={meshRef} args={[null, null, COUNT]} frustumCulled={false}>
+        <sphereGeometry args={[1, 8, 8]} />
+        <meshBasicMaterial vertexColors />
+      </instancedMesh>
+
+      <lineSegments ref={linesRef} geometry={lineGeometry}>
+        <lineBasicMaterial color={lineColor} transparent opacity={lineOpacity} />
+      </lineSegments>
+    </group>
+  )
+}

package/assets/templates/three-fiber/src/components/ParticleSystem.jsx

@@ -0,0 +1,77 @@
+import { useRef, useMemo } from 'react'
+import { useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+import { useScene } from '../context/SceneContext'
+
+const PARTICLE_COUNT = 300
+
+export default function ParticleSystem() {
+  const ref = useRef()
+  const { sceneIndex } = useScene()
+
+  const { positions, velocities } = useMemo(() => {
+    const pos = new Float32Array(PARTICLE_COUNT * 3)
+    const vel = []
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      const theta = Math.random() * Math.PI * 2
+      const phi   = Math.acos(2 * Math.random() - 1)
+      const r     = 6 + Math.random() * 4
+      pos[i * 3]     = r * Math.sin(phi) * Math.cos(theta)
+      pos[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta)
+      pos[i * 3 + 2] = r * Math.cos(phi)
+      vel.push(new THREE.Vector3(
+        (Math.random() - 0.5) * 0.02,
+        -0.01 - Math.random() * 0.02,  // drift downward (failure mode)
+        (Math.random() - 0.5) * 0.02
+      ))
+    }
+    return { positions: pos, velocities: vel }
+  }, [])
+
+  const geometry = useMemo(() => {
+    const geo = new THREE.BufferGeometry()
+    geo.setAttribute('position', new THREE.BufferAttribute(positions.slice(), 3))
+    return geo
+  }, [positions])
+
+  useFrame(() => {
+    if (!ref.current) return
+    const pos = ref.current.geometry.attributes.position
+    const isExplosion = sceneIndex === 5
+
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      const v = velocities[i]
+      if (isExplosion) {
+        pos.setXYZ(i,
+          pos.getX(i) + v.x * 4,
+          pos.getY(i) + v.y * 2,
+          pos.getZ(i) + v.z * 4,
+        )
+        if (Math.abs(pos.getX(i)) > 15) {
+          pos.setXYZ(i,
+            (Math.random() - 0.5) * 2,
+            (Math.random() - 0.5) * 2,
+            (Math.random() - 0.5) * 2,
+          )
+        }
+      } else {
+        pos.setXYZ(i,
+          pos.getX(i) + v.x,
+          pos.getY(i) + v.y,
+          pos.getZ(i) + v.z,
+        )
+        if (pos.getY(i) < -9) pos.setY(i, 9)
+      }
+    }
+    pos.needsUpdate = true
+  })
+
+  const visible = sceneIndex === 1 || sceneIndex === 5
+  const color   = sceneIndex === 1 ? '#EF4444' : '#A78BFA'
+
+  return (
+    <points ref={ref} geometry={geometry} visible={visible}>
+      <pointsMaterial color={color} size={0.08} transparent opacity={0.8} sizeAttenuation />
+    </points>
+  )
+}