npm - cinematic-web - Versions diffs - 0.1.0 - Mend

cinematic-web 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/assets/templates/three-fiber/src/components/Scene.jsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { Canvas } from '@react-three/fiber'
+import { AdaptiveDpr, AdaptiveEvents } from '@react-three/drei'
+import { EffectComposer, Bloom } from '@react-three/postprocessing'
+import NetworkGraph from './NetworkGraph'
+import CameraRig from './CameraRig'
+import ParticleSystem from './ParticleSystem'
+import SocialProofBillboards from './SocialProofBillboards'
+// Detect low-end device: fewer nodes, no Bloom
+const isLowEnd = typeof navigator !== 'undefined' && navigator.hardwareConcurrency <= 2
+export default function Scene() {
+  return (
+    <Canvas
+      camera={{ position: [0, 0, 20], fov: 60, near: 0.1, far: 100 }}
+      gl={{ antialias: !isLowEnd, alpha: false }}
+      dpr={[1, isLowEnd ? 1 : 2]}
+      style={{ background: '{{palette.background}}' }}
+    >
+      <fog attach="fog" args={['{{palette.background}}', 20, 60]} />
+      <ambientLight intensity={0.3} />
+      <pointLight position={[0, 0, 10]} intensity={1.5} color="{{palette.accent}}" />
+      <CameraRig />
+      <NetworkGraph lowEnd={isLowEnd} />
+      <ParticleSystem />
+      <SocialProofBillboards />
+      {!isLowEnd && (
+        <EffectComposer>
+          <Bloom luminanceThreshold={0.3} luminanceSmoothing={0.9} intensity={0.8} />
+        </EffectComposer>
+      )}
+      <AdaptiveDpr pixelated />
+      <AdaptiveEvents />
+    </Canvas>
+  )
+}

package/assets/templates/three-fiber/src/components/SocialProofBillboards.jsx ADDED Viewed

@@ -0,0 +1,56 @@
+import { Html } from '@react-three/drei'
+import { useScene } from '../context/SceneContext'
+const TESTIMONIALS = [
+  {
+    text: "{{brand}} delivered results in the first week. Nothing else came close.",
+    author: "Priya K., Founder",
+    position: [-4, 2, 2],
+  },
+  {
+    text: "Finally a product that doesn't feel like every other AI tool out there.",
+    author: "Marcus T., Director",
+    position: [4, -1, 1],
+  },
+  {
+    text: "I've tried everything. {{brand}} is the only one that actually works.",
+    author: "Alex M., Consultant",
+    position: [0, -3, 4],
+  },
+]
+export default function SocialProofBillboards() {
+  const { sceneIndex } = useScene()
+  if (sceneIndex !== 4) return null
+  return (
+    <>
+      {TESTIMONIALS.map((t, i) => (
+        <Html
+          key={i}
+          position={t.position}
+          center
+          distanceFactor={8}
+          style={{ pointerEvents: 'none' }}
+        >
+          <div style={{
+            background: 'rgba(10,10,20,0.85)',
+            border: '1px solid {{palette.accent}}66',
+            borderRadius: '12px',
+            padding: '16px 20px',
+            width: '220px',
+            backdropFilter: 'blur(12px)',
+            color: '#e0e0ff',
+            fontFamily: '{{typography.heading0}}, sans-serif',
+            fontSize: '12px',
+            lineHeight: 1.6,
+          }}>
+            <p style={{ margin: '0 0 8px', color: '#ccc' }}>"{t.text}"</p>
+            <p style={{ margin: 0, color: '{{palette.accent}}', fontWeight: 600, fontSize: '11px' }}>— {t.author}</p>
+          </div>
+        </Html>
+      ))}
+    </>
+  )
+}

package/assets/templates/three-fiber/src/context/SceneContext.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { createContext, useContext, useState, useCallback } from 'react'
+const SceneContext = createContext({ progress: 0, sceneIndex: 0, setProgress: () => {} })
+export function SceneProvider({ children }) {
+  const [progress, setProgressRaw] = useState(0)
+  const [sceneIndex, setSceneIndex] = useState(0)
+  const setProgress = useCallback((p) => {
+    setProgressRaw(p)
+    setSceneIndex(Math.min(5, Math.floor(p * 6)))
+  }, [])
+  return (
+    <SceneContext.Provider value={{ progress, sceneIndex, setProgress }}>
+      {children}
+    </SceneContext.Provider>
+  )
+}
+export const useScene = () => useContext(SceneContext)

package/assets/templates/three-fiber/src/index.css ADDED Viewed

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Base reset */
+*, *::before, *::after { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; background: {{palette.background}}; overflow-x: hidden; }
+#root { width: 100%; }
+/* Noise overlay — eliminates flat digital gradients */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.04;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  background-size: 200px 200px;
+}
+/* Scrollbar */
+::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar-track { background: {{palette.background}}; }
+::-webkit-scrollbar-thumb { background: {{palette.accent}}; border-radius: 2px; }
+/* Scene section utility — positioned absolute inside the 600vh container */
+.scene-section {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  pointer-events: none;
+}
+.scene-section > * { pointer-events: auto; }

package/assets/templates/three-fiber/src/main.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import Lenis from '@studio-freight/lenis'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import './index.css'
+import App from './App.jsx'
+gsap.registerPlugin(ScrollTrigger)
+// Lenis smooth scroll wired into GSAP ticker
+const lenis = new Lenis()
+gsap.ticker.add((time) => lenis.raf(time * 1000))
+gsap.ticker.lagSmoothing(0)
+lenis.on('scroll', ScrollTrigger.update)
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/assets/templates/three-fiber/src/sections/CTA.jsx ADDED Viewed

@@ -0,0 +1,41 @@
+export default function CTA({ style }) {
+  return (
+    <div className="scene-section" style={style}>
+      <div className="max-w-2xl px-8 text-center">
+        <h2 className="text-5xl md:text-6xl font-extrabold text-white leading-tight mb-6">
+          Ready to experience<br />
+          <span
+            className="text-transparent bg-clip-text"
+            style={{ backgroundImage: 'linear-gradient(135deg, {{palette.accent}} 0%, #22D3EE 100%)' }}
+          >
+            {{brand}}?
+          </span>
+        </h2>
+        <p className="text-gray-400 text-xl mb-10">
+          {{purpose}}
+        </p>
+        <a
+          href="#"
+          className="inline-block text-white font-bold text-xl px-12 py-5 rounded-full transition-all duration-200"
+          style={{
+            background: '{{palette.accent}}',
+            boxShadow: '0 0 60px {{palette.accent}}80',
+          }}
+          onMouseEnter={e => {
+            e.currentTarget.style.transform = 'scale(1.03)'
+            e.currentTarget.style.boxShadow = '0 0 80px {{palette.accent}}b3'
+            e.currentTarget.style.opacity = '0.85'
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.transform = 'scale(1)'
+            e.currentTarget.style.boxShadow = '0 0 60px {{palette.accent}}80'
+            e.currentTarget.style.opacity = '1'
+          }}
+        >
+          {{cta}} →
+        </a>
+        <p className="text-gray-600 text-sm mt-5">No commitment required · Get started today</p>
+      </div>
+    </div>
+  )
+}

package/assets/templates/three-fiber/src/sections/Hero.jsx ADDED Viewed

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+export default function Hero({ style }) {
+  const ref = useRef()
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      gsap.from(ref.current.children, {
+        y: 40,
+        opacity: 0,
+        duration: 1,
+        stagger: 0.12,
+        ease: 'power3.out',
+        delay: 0.8,
+      })
+    }, ref)
+    return () => ctx.revert()
+  }, [])
+  return (
+    <div className="scene-section" style={style}>
+      <div
+        ref={ref}
+        className="max-w-3xl px-8"
+        style={{ marginLeft: 'min(-10vw, -40px)' }}
+      >
+        <p className="text-accent text-sm font-semibold tracking-widest uppercase mb-4">
+          {{preset.name}}
+        </p>
+        <h1 className="text-5xl md:text-7xl font-extrabold text-white leading-none mb-6">
+          {{heroLine1}}<br />
+          <span
+            className="text-transparent bg-clip-text"
+            style={{ backgroundImage: 'linear-gradient(135deg, {{palette.accent}} 0%, #22D3EE 100%)' }}
+          >
+            {{heroLine2}}
+          </span>
+        </h1>
+        <p className="text-gray-400 text-lg md:text-xl max-w-xl mb-8 leading-relaxed">
+          {{purpose}}
+        </p>
+        <div className="flex flex-wrap gap-4">
+          <a
+            href="#"
+            className="text-white font-semibold px-8 py-4 rounded-full transition-all duration-200"
+            style={{ background: '{{palette.accent}}', boxShadow: '0 0 30px {{palette.accent}}66' }}
+            onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.03)'; e.currentTarget.style.opacity = '0.85' }}
+            onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.opacity = '1' }}
+          >
+            {{cta}}
+          </a>
+          <a
+            href="#"
+            className="text-gray-400 font-medium px-8 py-4 rounded-full border border-gray-700 hover:text-white transition-all duration-200"
+            style={{ '--tw-border-opacity': 1 }}
+            onMouseEnter={e => { e.currentTarget.style.borderColor = '{{palette.accent}}' }}
+            onMouseLeave={e => { e.currentTarget.style.borderColor = '' }}
+          >
+            Learn more
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

package/assets/templates/three-fiber/src/sections/HowItWorks.jsx ADDED Viewed

@@ -0,0 +1,55 @@
+const STEPS = [
+  {
+    n: '01',
+    title: '{{protocolStep0Title}}',
+    desc: '{{protocolStep0Desc}}',
+  },
+  {
+    n: '02',
+    title: '{{protocolStep1Title}}',
+    desc: '{{protocolStep1Desc}}',
+  },
+  {
+    n: '03',
+    title: '{{protocolStep2Title}}',
+    desc: '{{protocolStep2Desc}}',
+  },
+]
+export default function HowItWorks({ style }) {
+  return (
+    <div className="scene-section" style={style}>
+      <div className="max-w-3xl px-8 w-full">
+        <p className="text-cyan text-sm font-semibold tracking-widest uppercase mb-4 text-center">
+          How it works
+        </p>
+        <h2 className="text-4xl md:text-5xl font-extrabold text-white text-center mb-12">
+          Three steps. Real results.
+        </h2>
+        <div className="flex flex-col gap-5">
+          {STEPS.map((s, i) => (
+            <div
+              key={i}
+              className="flex items-start gap-6"
+              style={{
+                padding: '20px 24px',
+                borderRadius: '16px',
+                background: 'rgba(10,10,20,0.65)',
+                border: '1px solid rgba(34,211,238,0.15)',
+                backdropFilter: 'blur(10px)',
+              }}
+            >
+              <span className="text-cyan font-mono font-bold text-2xl opacity-60 flex-shrink-0">
+                {s.n}
+              </span>
+              <div>
+                <h3 className="text-white font-bold text-xl mb-1">{s.title}</h3>
+                <p className="text-gray-400 text-sm leading-relaxed">{s.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/assets/templates/three-fiber/src/sections/Navbar.jsx ADDED Viewed

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+export default function Navbar() {
+  const ref = useRef()
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      gsap.from(ref.current, { y: -40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.5 })
+    })
+    return () => ctx.revert()
+  }, [])
+  return (
+    <nav
+      ref={ref}
+      className="fixed top-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-8 px-6 py-3 rounded-full"
+      style={{
+        background: 'rgba(10,10,20,0.6)',
+        backdropFilter: 'blur(20px)',
+        border: '1px solid {{palette.accent}}33',
+      }}
+    >
+      <span className="text-white font-bold tracking-wider text-sm">{{brand}}</span>
+      <div className="hidden md:flex gap-6 text-sm text-gray-400">
+        <a href="#" className="hover:text-white transition-colors duration-200">How it works</a>
+        <a href="#" className="hover:text-white transition-colors duration-200">Pricing</a>
+      </div>
+      <a
+        href="#"
+        className="text-white text-sm font-semibold px-4 py-2 rounded-full transition-all duration-200"
+        style={{ background: '{{palette.accent}}', boxShadow: '0 0 20px {{palette.accent}}4d' }}
+        onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.03)'; e.currentTarget.style.opacity = '0.85' }}
+        onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.opacity = '1' }}
+      >
+        {{cta}}
+      </a>
+    </nav>
+  )
+}

package/assets/templates/three-fiber/src/sections/SocialProof.jsx ADDED Viewed

@@ -0,0 +1,50 @@
+const METRICS = [
+  { value: '500+', label: 'Active users' },
+  { value: '4×',   label: 'Better results' },
+  { value: '98%',  label: 'Satisfaction rate' },
+  { value: '10×',  label: 'Industry average' },
+]
+export default function SocialProof({ style }) {
+  return (
+    <div className="scene-section" style={style}>
+      <div className="max-w-4xl px-8 w-full">
+        <p className="text-glow text-sm font-semibold tracking-widest uppercase mb-4 text-center">
+          Social proof
+        </p>
+        <h2 className="text-3xl md:text-4xl font-extrabold text-white text-center mb-10">
+          Numbers don't lie.
+        </h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
+          {METRICS.map((m, i) => (
+            <div
+              key={i}
+              className="text-center p-6 rounded-2xl"
+              style={{
+                background: 'rgba(10,10,20,0.7)',
+                border: '1px solid {{palette.accent}}33',
+                backdropFilter: 'blur(12px)',
+              }}
+            >
+              <div
+                className="text-4xl font-extrabold mb-1"
+                style={{
+                  background: 'linear-gradient(135deg, {{palette.accent}}, #22D3EE)',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                  backgroundClip: 'text',
+                }}
+              >
+                {m.value}
+              </div>
+              <div className="text-gray-400 text-sm">{m.label}</div>
+            </div>
+          ))}
+        </div>
+        <p className="text-gray-600 text-center text-xs tracking-widest uppercase">
+          ↑ Testimonials floating in the network above
+        </p>
+      </div>
+    </div>
+  )
+}

package/assets/templates/three-fiber/src/sections/TheOldWay.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+const PAIN_POINTS = [
+  'Slow, manual processes that don\'t scale',
+  'Generic solutions that ignore your context',
+  'Results that disappoint every time',
+]
+export default function TheOldWay({ style }) {
+  return (
+    <div className="scene-section" style={style}>
+      <div className="max-w-2xl px-8 text-center">
+        <p className="text-danger text-sm font-semibold tracking-widest uppercase mb-4">
+          The old way
+        </p>
+        <h2 className="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-8">
+          The status quo<br />is broken.
+        </h2>
+        <div className="flex flex-col gap-4 text-left max-w-sm mx-auto">
+          {PAIN_POINTS.map((item, i) => (
+            <div key={i} className="flex items-center gap-3">
+              <span className="text-danger text-xl font-bold flex-shrink-0">✕</span>
+              <span className="text-gray-400 text-lg">{item}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/assets/templates/three-fiber/src/sections/ValueProps.jsx ADDED Viewed

@@ -0,0 +1,50 @@
+const VALUE_PROPS = [
+  {
+    icon: '⚡',
+    title: '{{valueProp0}}',
+    desc: 'Deep analysis and intelligence applied to your specific context.',
+  },
+  {
+    icon: '📬',
+    title: '{{valueProp1}}',
+    desc: 'Tailored precisely to your goals — never a one-size-fits-all approach.',
+  },
+  {
+    icon: '🛡',
+    title: '{{valueProp2}}',
+    desc: 'Delivered reliably and safely, every single time.',
+  },
+]
+export default function ValueProps({ style }) {
+  return (
+    <div className="scene-section" style={style}>
+      <div className="max-w-4xl px-8 w-full">
+        <p className="text-success text-sm font-semibold tracking-widest uppercase mb-4 text-center">
+          Why {{brand}}
+        </p>
+        <h2 className="text-4xl md:text-5xl font-extrabold text-white text-center mb-12">
+          Built to{' '}
+          <span className="text-success">actually work.</span>
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {VALUE_PROPS.map((v, i) => (
+            <div
+              key={i}
+              className="rounded-2xl p-6"
+              style={{
+                background: 'rgba(10,10,20,0.7)',
+                border: '1px solid rgba(16,185,129,0.2)',
+                backdropFilter: 'blur(12px)',
+              }}
+            >
+              <div className="text-3xl mb-3">{v.icon}</div>
+              <h3 className="text-white font-bold text-lg mb-2">{v.title}</h3>
+              <p className="text-gray-400 text-sm leading-relaxed">{v.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/assets/templates/three-fiber/tailwind.config.js ADDED Viewed

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      colors: {
+        void:    '{{palette.background}}',
+        accent:  '{{palette.accent}}',
+        glow:    '{{palette.accent}}cc',
+        cyan:    '#22D3EE',
+        success: '#10B981',
+        danger:  '#EF4444',
+        node:    '#2A2A3A',
+      },
+      fontFamily: {
+        sans: ['{{typography.heading0}}', 'system-ui', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+}

package/assets/templates/three-fiber/vite.config.js ADDED Viewed

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