{"slug": "how-i-built-a-cinematic-ai-landing-page-with-gsap-canvas-api-and-next-js", "title": "How I Built a Cinematic AI Landing Page with GSAP, Canvas API and Next.js", "summary": "A developer built Digital Rain, a cinematic AI landing page template featuring falling mathematical symbols, liquid glass UI, and GSAP scroll animations using Next.js 15 and Tailwind CSS. The template includes a custom rain animation engine with mouse interaction and premium glassmorphism effects.", "body_md": "A deep dive into building Digital Rain — a cinematic AI landing page template with falling math symbols, liquid glass UI, and GSAP scroll animations using Next.js 15 and Tailwind CSS.\n\nMost AI landing pages look the same.\n\nHero section. Features grid. Pricing table. Footer.\n\nI wanted to build something different — something that makes visitors stop scrolling and say *\"wow, what is this?\"*\n\nThe result is **Digital Rain** — a cinematic AI landing page with falling mathematical symbols, liquid glass UI, and GSAP-powered scroll animations.\n\nHere's exactly how I built it.\n\nThe concept came from the Matrix — that iconic falling green code effect. But instead of random characters, I wanted mathematical symbols falling and reacting to a simulated liquid surface.\n\nThe goal was simple: make your AI product feel like a funded startup from day one.\n\n**Live demo:** [https://og-ai-next.vercel.app/](https://og-ai-next.vercel.app/)\n\nThe heart of the template is the custom rain animation engine. Here's how it works:\n\n``` js\nconst canvas = document.createElement('canvas');\nconst ctx = canvas.getContext('2d');\n\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n```\n\nInstead of random characters, I used mathematical symbols for a more premium feel:\n\n``` js\nconst symbols = [\n  '∑', 'π', '∆', '∫', '√', 'Ω', 'λ', 'φ',\n  '∞', 'θ', 'α', 'β', 'γ', 'δ', 'ε', 'ζ',\n  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'\n];\njs\nconst fontSize = 14;\nconst columns = Math.floor(canvas.width / fontSize);\nconst drops: number[] = new Array(columns).fill(1);\n\nfunction drawRain() {\n  // Fade effect — creates trail\n  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n  // Draw symbols\n  ctx.fillStyle = '#14b575'; // brand green\n  ctx.font = `${fontSize}px monospace`;\n\n  drops.forEach((drop, i) => {\n    const symbol = symbols[Math.floor(Math.random() * symbols.length)];\n    const x = i * fontSize;\n    const y = drop * fontSize;\n\n    ctx.fillStyle = `rgba(20, 181, 117, ${Math.random() * 0.8 + 0.2})`;\n    ctx.fillText(symbol, x, y);\n\n    // Reset drop randomly\n    if (y > canvas.height && Math.random() > 0.975) {\n      drops[i] = 0;\n    }\n    drops[i]++;\n  });\n}\n\n// Animate at 30fps\nsetInterval(drawRain, 33);\n```\n\nThis is the part that makes it feel interactive. When the mouse moves, nearby symbols react:\n\n``` js\nlet mouseX = 0;\nlet mouseY = 0;\n\nwindow.addEventListener('mousemove', (e) => {\n  mouseX = e.clientX;\n  mouseY = e.clientY;\n});\n\n// In drawRain function — add proximity effect\ndrops.forEach((drop, i) => {\n  const x = i * fontSize;\n  const y = drop * fontSize;\n\n  const distance = Math.sqrt(\n    Math.pow(x - mouseX, 2) + Math.pow(y - mouseY, 2)\n  );\n\n  // Symbols near cursor glow brighter\n  const opacity = distance < 100 \n    ? 1.0 \n    : Math.random() * 0.8 + 0.2;\n\n  ctx.fillStyle = `rgba(20, 181, 117, ${opacity})`;\n  ctx.fillText(symbol, x, y);\n});\n```\n\nGlassmorphism is everywhere but most implementations look cheap. Here's how to make it look premium:\n\n```\n.glass-card {\n  background: rgba(255, 255, 255, 0.05);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  box-shadow: \n    0 8px 32px rgba(0, 0, 0, 0.3),\n    inset 0 1px 0 rgba(255, 255, 255, 0.1);\n}\n```\n\nThe key differences from cheap glassmorphism:\n\nGSAP makes scroll animations smooth and performant. Here's the pattern I used for every section:\n\n``` js\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\n// Fade up animation on scroll\ngsap.fromTo('.feature-card', \n  { \n    opacity: 0, \n    y: 60 \n  },\n  {\n    opacity: 1,\n    y: 0,\n    duration: 0.8,\n    stagger: 0.15,\n    ease: 'power3.out',\n    scrollTrigger: {\n      trigger: '.features-section',\n      start: 'top 80%',\n      end: 'bottom 20%',\n    }\n  }\n);\n```\n\nThe `stagger: 0.15`\n\nis what makes multiple cards animate in sequence rather than all at once. This small detail makes the whole thing feel much more polished.\n\n```\nexport function Hero() {\n  return (\n    <section className=\"relative min-h-screen flex items-center\">\n      {/* Canvas background */}\n      <canvas \n        ref={canvasRef}\n        className=\"absolute inset-0 w-full h-full opacity-40\"\n      />\n\n      {/* Gradient overlay */}\n      <div className=\"absolute inset-0 bg-gradient-to-b \n        from-transparent via-black/20 to-black/80\" \n      />\n\n      {/* Content */}\n      <div className=\"relative z-10 max-w-6xl mx-auto px-6\">\n        <div className=\"glass-card p-8 rounded-2xl max-w-2xl\">\n          <h1 className=\"text-5xl font-bold text-white mb-4\">\n            Build Smarter Workflows with AI\n          </h1>\n          <p className=\"text-slate-300 text-lg mb-8\">\n            OG-AI helps teams automate repetitive tasks\n          </p>\n          <button className=\"bg-brand-500 text-black \n            px-8 py-4 rounded-xl font-semibold\">\n            Get Started\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n```\n\nThe best decision I made was putting all customization in a single config file:\n\n``` js\n// src/config.ts\nexport const config = {\n  brand: {\n    name: \"Your AI Product\",\n    tagline: \"Build Smarter Workflows with AI\",\n    color: \"#14b575\",\n  },\n  hero: {\n    title: \"Build Smarter Workflows with AI\",\n    subtitle: \"Automate tasks, generate content, unlock insights\",\n    cta: \"Get Started Free\",\n  },\n  nav: {\n    links: [\"Features\", \"How It Works\", \"Pricing\", \"Testimonials\", \"FAQ\"],\n  },\n  pricing: {\n    monthly: [\n      { name: \"Starter\", price: 9, features: [\"100 generations\", \"API access\"] },\n      { name: \"Pro\", price: 29, features: [\"Unlimited\", \"Priority support\"] },\n    ]\n  }\n}\n```\n\nNo digging through components. Just update this file and everything changes.\n\nThe demo speaks for itself: [https://og-ai-next.vercel.app/](https://og-ai-next.vercel.app/)\n\nIf you're building an AI product and want your landing page to feel like a funded startup from day one — I turned this into a template you can grab and customize in hours.\n\n**Get the template:** [https://pixelanas.gumroad.com/l/digital-rain](https://pixelanas.gumroad.com/l/digital-rain)\n\nBuilding this taught me that the difference between a good landing page and a cinematic one is:\n\nIf you have questions about any part of the implementation, drop them in the comments. Happy to go deeper on any section.\n\n🔗 Demo → [https://og-ai-next.vercel.app/](https://og-ai-next.vercel.app/)\n\n🛒 Get it → [https://pixelanas.gumroad.com/l/digitalrain](https://pixelanas.gumroad.com/l/digitalrain)\n\n*Built by Anas — full-stack developer specializing in Next.js, animations, and premium UI. Find me on X: @pixelanas*", "url": "https://wpnews.pro/news/how-i-built-a-cinematic-ai-landing-page-with-gsap-canvas-api-and-next-js", "canonical_source": "https://dev.to/anas_sheikh_2/how-i-built-a-cinematic-ai-landing-page-with-gsap-canvas-api-and-nextjs-4cc3", "published_at": "2026-07-10 10:14:28+00:00", "updated_at": "2026-07-10 10:45:04.624155+00:00", "lang": "en", "topics": ["developer-tools", "ai-products", "generative-ai"], "entities": ["Digital Rain", "GSAP", "Canvas API", "Next.js", "Tailwind CSS", "Matrix"], "alternates": {"html": "https://wpnews.pro/news/how-i-built-a-cinematic-ai-landing-page-with-gsap-canvas-api-and-next-js", "markdown": "https://wpnews.pro/news/how-i-built-a-cinematic-ai-landing-page-with-gsap-canvas-api-and-next-js.md", "text": "https://wpnews.pro/news/how-i-built-a-cinematic-ai-landing-page-with-gsap-canvas-api-and-next-js.txt", "jsonld": "https://wpnews.pro/news/how-i-built-a-cinematic-ai-landing-page-with-gsap-canvas-api-and-next-js.jsonld"}}