[{"id":"1a3ee6b4-bdc7-43b8-8436-6a294ef25bfb","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n \\n GSAP Vanilla JS Template\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n \\n \\n \\n \\n \\n \\n \\n

\\n

\\n \\n \\n

\\n

TEMPLATE READY

\\n

Vanilla JS
GSAP Setup

\\n

An industry-standard foundation for high-performance web animations.

\\n \\n

\\n

\\n ⚡\\n Vite Powered\\n

\\n

\\n ✨\\n Premium Aesthetics\\n

\\n

\\n 🚀\\n GSAP Ready\\n

\\n

\\n \\n \\n

\\n

\\n\\n \\n

\\n Core Benefits\\n

Engineered for Performance

\\n \\n

\\n

\\n 🏗️\\n

Modular Core

\\n

Clean separation of concerns between state, logic, and animations for maximum maintainability.

\\n

\\n \\n

\\n 🎨\\n

Glassmorphism

\\n

Modern premium UI styles using CSS variables and backdrop filters for a cutting-edge look.

\\n

\\n \\n

\\n 🌀\\n

Fluid Motion

\\n

Buttery smooth GSAP transitions and complex timelines that work flawlessly on all devices.

\\n

\\n \\n \\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"name\\\": \\\"vanillajs-gsap-1a3ee6b4-bdc7-43b8-8436-6a294ef25bfb\\\",\\n \\\"private\\\": true,\\n \\\"version\\\": \\\"0.0.0\\\",\\n \\\"type\\\": \\\"module\\\",\\n \\\"scripts\\\": {\\n \\\"dev\\\": \\\"vite\\\",\\n \\\"build\\\": \\\"vite build\\\",\\n \\\"preview\\\": \\\"vite preview\\\"\\n },\\n \\\"devDependencies\\\": {\\n \\\"vite\\\": \\\"^5.2.0\\\"\\n },\\n \\\"dependencies\\\": {\\n \\\"gsap\\\": \\\"^3.12.5\\\"\\n }\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"},{\"id\":\"/.gitignore\",\"name\":\".gitignore\",\"code\":\"# Dependencies\\nnode_modules/\\n.pnp\\n.pnp.js\\n\\n# Testing\\ncoverage/\\n\\n# Production\\ndist/\\nbuild/\\n\\n# IDEs and Editors\\n.vscode/\\n.idea/\\n*.suo\\n*.ntvs*\\n*.njsproj\\n*.sln\\n*.sw?\\n\\n# Logs\\nnpm-debug.log*\\nyarn-debug.log*\\nyarn-error.log*\\nlogs/\\n*.log\\n\\n# OS Files\\n.DS_Store\\nThumbs.db\\n\\n# Environment\\n.env\\n.env.local\\n.env.development.local\\n.env.test.local\\n.env.production.local\\n\",\"language\":\"javascript\"},{\"id\":\"/about.html\",\"name\":\"about.html\",\"code\":\"\\n\\n \\n \\n \\n \\n About | GSAP Vanilla JS Template\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n \\n \\n \\n \\n \\n \\n

\\n

\\n \\n

\\n

Why modular?

\\n

\\n A scalable feature-based structure separates concerns, making GSAP animations highly predictable and components incredibly reusable across large Vanilla web projects.\\n

\\n

\\n \\n \\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/src/features/about/animations/aboutAnim.js\",\"name\":\"src/features/about/animations/aboutAnim.js\",\"code\":\"import gsap from 'gsap';\\n\\nexport const initAboutAnimation = () => {\\n // Prevent FOUC\\n gsap.set('.js-about-content', { autoAlpha: 1 });\\n \\n const tl = gsap.timeline({\\n defaults: { ease: 'power3.out', duration: 1 }\\n });\\n \\n // Different background animation for the about page\\n gsap.to('.alt-gradient', {\\n scale: 1.2,\\n duration: 20,\\n yoyo: true,\\n repeat: -1,\\n ease: 'sine.inOut'\\n });\\n \\n tl\\n .from('.js-about-content', { x: -50, opacity: 0, duration: 1 })\\n .from('.js-about-title', { opacity: 0, y: 30 }, '-=0.5')\\n .from('.js-about-text', { opacity: 0, y: 20 }, '-=0.6');\\n};\\n\",\"language\":\"javascript\"},{\"id\":\"/src/features/about/styles/about.css\",\"name\":\"src/features/about/styles/about.css\",\"code\":\"/* Specific to the About Page Content */\\n.about-content {\\n position: relative;\\n z-index: 10;\\n background: transparent;\\n padding: var(--spacing-xl);\\n max-width: 600px;\\n width: 90%;\\n text-align: left;\\n /* Hidden state for GSAP */\\n opacity: 0;\\n visibility: hidden; \\n}\\n\\n.about-content .title {\\n margin-bottom: var(--spacing-md);\\n}\\n\\n.about-content .subtitle {\\n font-size: 1.25rem;\\n}\\n\",\"language\":\"css\"},{\"id\":\"/src/features/home/animations/featuresAnim.js\",\"name\":\"src/features/home/animations/featuresAnim.js\",\"code\":\"import gsap from \\\"../../../shared/lib/gsap.js\\\";\\n\\nexport const initFeaturesAnimation = () => {\\n const features = document.querySelectorAll(\\\".js-scroll-feature\\\");\\n\\n if (!features.length) return;\\n\\n // Animate the cards as they come into view\\n gsap.to(features, {\\n opacity: 1,\\n y: 0,\\n stagger: 0.2,\\n duration: 0.8,\\n ease: \\\"power3.out\\\",\\n scrollTrigger: {\\n trigger: \\\".js-features-section\\\",\\n start: \\\"top 80%\\\", // Start when top of section is 80% down the viewport\\n toggleActions: \\\"play none none none\\\", // Only play once\\n },\\n });\\n\\n // Example of a secondary scroll effect: Title reveal\\n gsap.from(\\\".section-title\\\", {\\n opacity: 0,\\n scale: 0.9,\\n duration: 1,\\n scrollTrigger: {\\n trigger: \\\".section-title\\\",\\n start: \\\"top 90%\\\",\\n scrub: 1, // Link animation progress to scroll bar\\n },\\n });\\n};\\n\",\"language\":\"javascript\"},{\"id\":\"/src/features/home/animations/heroAnim.js\",\"name\":\"src/features/home/animations/heroAnim.js\",\"code\":\"import gsap from 'gsap';\\n\\nexport const initHeroAnimation = () => {\\n // Prevent FOUC\\n gsap.set('.js-hero-card', { autoAlpha: 1 });\\n \\n const masterTl = gsap.timeline({\\n defaults: { ease: 'power3.out', duration: 0.8 }\\n });\\n \\n // Background rotation\\n gsap.to('.gradient-bg', {\\n rotation: 360,\\n duration: 60,\\n ease: 'none',\\n repeat: -1\\n });\\n \\n masterTl\\n .from('.js-hero-card', { y: 50, opacity: 0, duration: 1, ease: 'back.out(1.5)' })\\n .from('.js-badge', { scale: 0.5, opacity: 0, duration: 0.6, ease: 'elastic.out(1, 0.5)' }, '-=0.4')\\n .from('.js-title', { y: 20, opacity: 0 }, '-=0.4')\\n .from('.js-subtitle', { y: 15, opacity: 0 }, '-=0.6')\\n .from('.js-feature', { y: 20, opacity: 0, stagger: 0.1, duration: 0.6 }, '-=0.5')\\n .from('.js-replay-btn', { opacity: 0, y: 10, duration: 0.5 }, '-=0.2');\\n \\n return masterTl;\\n};\\n\\n// Component level interactions\\nexport const initHeroInteractions = (timeline) => {\\n const replayBtn = document.querySelector('.js-replay-btn');\\n if (!replayBtn) return;\\n \\n replayBtn.addEventListener('mouseenter', () => {\\n gsap.to(replayBtn, { scale: 1.05, duration: 0.3, ease: 'power2.out' });\\n });\\n \\n replayBtn.addEventListener('mouseleave', () => {\\n gsap.to(replayBtn, { scale: 1, duration: 0.3, ease: 'power2.out' });\\n });\\n \\n replayBtn.addEventListener('click', () => {\\n timeline.restart();\\n });\\n};\\n\",\"language\":\"javascript\"},{\"id\":\"/src/features/home/styles/features.css\",\"name\":\"src/features/home/styles/features.css\",\"code\":\"/* Specific to the Features Section on the Home Page */\\n.features-section {\\n padding: 100px 0;\\n width: 100%;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n position: relative;\\n z-index: 10;\\n overflow: hidden;\\n}\\n\\n.section-label {\\n color: var(--accent);\\n text-transform: uppercase;\\n font-weight: 800;\\n letter-spacing: 2px;\\n font-size: 0.8rem;\\n margin-bottom: 1rem;\\n}\\n\\n.section-title {\\n font-size: 2.5rem;\\n margin-bottom: 3rem;\\n text-align: center;\\n}\\n\\n.features-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\\n gap: 2rem;\\n max-width: 1200px;\\n width: 90%;\\n padding: 0 1rem;\\n}\\n\\n.feature-card {\\n background: var(--glass-bg);\\n backdrop-filter: blur(10px);\\n -webkit-backdrop-filter: blur(10px);\\n border: 1px solid var(--glass-border);\\n padding: 2.5rem;\\n border-radius: var(--radius-lg);\\n transition: transform 0.3s ease, border-color 0.3s ease;\\n opacity: 0;\\n transform: translateY(30px);\\n}\\n\\n.feature-card:hover {\\n border-color: var(--accent);\\n transform: translateY(-5px);\\n}\\n\\n.feature-card-icon {\\n font-size: 2.5rem;\\n margin-bottom: 1.5rem;\\n display: block;\\n}\\n\\n.feature-card h3 {\\n font-size: 1.5rem;\\n margin-bottom: 1rem;\\n color: var(--text-main);\\n}\\n\\n.feature-card p {\\n color: var(--text-muted);\\n font-size: 1rem;\\n line-height: 1.6;\\n}\\n\",\"language\":\"css\"},{\"id\":\"/src/features/home/styles/hero.css\",\"name\":\"src/features/home/styles/hero.css\",\"code\":\"/* Specific to the Hero Component on the Home Page */\\n.hero-card {\\n position: relative;\\n z-index: 10;\\n background: var(--glass-bg);\\n backdrop-filter: blur(20px);\\n -webkit-backdrop-filter: blur(20px);\\n border: 1px solid var(--glass-border);\\n border-radius: var(--radius-lg);\\n padding: var(--spacing-xl);\\n max-width: 500px;\\n width: 90%;\\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\\n text-align: center;\\n /* Hidden state for GSAP */\\n opacity: 0;\\n visibility: hidden; \\n}\\n\\n.badge {\\n display: inline-block;\\n background: rgba(129, 140, 248, 0.15);\\n color: var(--accent);\\n padding: 0.4rem 1rem;\\n border-radius: var(--radius-full);\\n font-size: 0.75rem;\\n font-weight: 800;\\n letter-spacing: 0.1em;\\n margin-bottom: var(--spacing-md);\\n border: 1px solid rgba(129, 140, 248, 0.3);\\n}\\n\\n.card-features {\\n display: flex;\\n justify-content: center;\\n gap: var(--spacing-md);\\n margin-bottom: 2.5rem;\\n flex-wrap: wrap;\\n}\\n\\n.feature-item {\\n display: flex;\\n align-items: center;\\n gap: var(--spacing-sm);\\n background: rgba(0, 0, 0, 0.2);\\n padding: var(--spacing-sm) var(--spacing-md);\\n border-radius: var(--radius-md);\\n font-size: 0.875rem;\\n font-weight: 400;\\n border: 1px solid var(--glass-border);\\n transition: transform 0.3s ease, background 0.3s ease;\\n cursor: default;\\n}\\n\\n.feature-item:hover {\\n transform: translateY(-2px);\\n background: rgba(255, 255, 255, 0.08);\\n}\\n\\n.feature-icon {\\n font-size: 1.1rem;\\n}\\n\\n.cta-button {\\n background: var(--text-main);\\n color: var(--bg-dark);\\n border: none;\\n padding: var(--spacing-md) var(--spacing-lg);\\n border-radius: var(--radius-full);\\n font-family: inherit;\\n font-size: 1rem;\\n font-weight: 600;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n box-shadow: 0 10px 20px -5px rgba(255, 255, 255, 0.2);\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.cta-button:hover {\\n transform: translateY(-3px) scale(1.02);\\n box-shadow: 0 15px 25px -5px rgba(255, 255, 255, 0.3);\\n}\\n\\n.cta-button:active {\\n transform: translateY(0) scale(0.98);\\n}\\n\",\"language\":\"css\"},{\"id\":\"/src/pages/about.js\",\"name\":\"src/pages/about.js\",\"code\":\"import { initAboutAnimation } from '../features/about/animations/aboutAnim.js';\\n\\ndocument.addEventListener('DOMContentLoaded', () => {\\n initAboutAnimation();\\n});\\n\",\"language\":\"javascript\"},{\"id\":\"/src/pages/home.js\",\"name\":\"src/pages/home.js\",\"code\":\"import { initHeroAnimation, initHeroInteractions } from '../features/home/animations/heroAnim.js';\\nimport { initFeaturesAnimation } from '../features/home/animations/featuresAnim.js';\\n\\ndocument.addEventListener('DOMContentLoaded', () => {\\n const heroTimeline = initHeroAnimation();\\n initHeroInteractions(heroTimeline);\\n initFeaturesAnimation();\\n});\\n\",\"language\":\"javascript\"},{\"id\":\"/src/shared/lib/gsap.js\",\"name\":\"src/shared/lib/gsap.js\",\"code\":\"import gsap from 'gsap';\\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\\n\\ngsap.registerPlugin(ScrollTrigger);\\n\\n// Export the base gsap object so features use the same instance\\nexport default gsap;\\nexport { ScrollTrigger };\\n\",\"language\":\"javascript\"},{\"id\":\"/src/shared/styles/reset.css\",\"name\":\"src/shared/styles/reset.css\",\"code\":\"*, *::before, *::after {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n}\\n\\nbody {\\n background: var(--bg-dark);\\n min-height: 100vh;\\n display: flex;\\n flex-direction: column;\\n overflow-x: hidden;\\n}\\n\\n/* Background elements reused across pages */\\n.app-container {\\n width: 100%;\\n flex-grow: 1;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: relative;\\n min-height: 100vh; /* Fixed min-height for correct visual scaling */\\n}\\n\\n.gradient-bg {\\n position: absolute;\\n top: -50%;\\n left: -50%;\\n width: 200%;\\n height: 200%;\\n background: radial-gradient(circle at center, #4338ca 0%, #0f172a 50%);\\n opacity: 0.6;\\n z-index: 0;\\n}\\n\\n.alt-gradient {\\n background: radial-gradient(circle at center, #312e81 0%, #0f172a 60%);\\n}\\n\\n/* Simple Navigation */\\n.main-nav {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n padding: 2rem;\\n display: flex;\\n justify-content: center;\\n gap: 2rem;\\n z-index: 100;\\n}\\n\\n.main-nav a {\\n color: var(--text-muted);\\n text-decoration: none;\\n font-family: 'Outfit', sans-serif;\\n font-weight: 400;\\n font-size: 1.1rem;\\n transition: color 0.3s ease;\\n}\\n\\n.main-nav a:hover,\\n.main-nav a.active {\\n color: var(--text-main);\\n}\\n\",\"language\":\"css\"},{\"id\":\"/src/shared/styles/typography.css\",\"name\":\"src/shared/styles/typography.css\",\"code\":\"body {\\n font-family: 'Outfit', sans-serif;\\n color: var(--text-main);\\n line-height: 1.6;\\n}\\n\\nh1, h2, h3, h4, h5, h6 {\\n line-height: 1.2;\\n}\\n\\n.title {\\n font-size: clamp(2.5rem, 5vw, 4rem);\\n font-weight: 800;\\n margin-bottom: var(--spacing-md);\\n}\\n\\n.subtitle {\\n font-size: 1.125rem;\\n color: var(--text-muted);\\n font-weight: 300;\\n margin-bottom: var(--spacing-lg);\\n}\\n\\n.highlight {\\n background: linear-gradient(to right, #818cf8, #c084fc);\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n background-clip: text;\\n}\\n\",\"language\":\"css\"},{\"id\":\"/src/shared/styles/variables.css\",\"name\":\"src/shared/styles/variables.css\",\"code\":\":root {\\n --bg-dark: #0f172a;\\n --bg-gradient: linear-gradient(135deg, #1e1b4b, #312e81, #0f172a);\\n --glass-bg: rgba(255, 255, 255, 0.05);\\n --glass-border: rgba(255, 255, 255, 0.1);\\n --text-main: #f8fafc;\\n --text-muted: #94a3b8;\\n --accent: #818cf8;\\n --accent-glow: rgba(129, 140, 248, 0.5);\\n \\n --spacing-sm: 0.5rem;\\n --spacing-md: 1rem;\\n --spacing-lg: 2rem;\\n --spacing-xl: 3rem;\\n \\n --radius-sm: 8px;\\n --radius-md: 12px;\\n --radius-lg: 24px;\\n --radius-full: 100px;\\n}\\n\",\"language\":\"css\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"1536px","mobileWidth":"518px","height":"787px","mobileHeight":"984px","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"e84f22c3-ad00-4d07-9309-1d215f8f5a20","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5f6e3959-b257-4940-89d0-a90604981a9e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"81f13148-269a-4763-920b-25f00e3625b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5e0ab7a2-feed-483f-84a4-125f978083a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e98d2fa5-c392-45bd-baa0-53393d5ceb7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2d352c0e-4a25-43e5-9f3d-d79345b7f9b6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"62d6489a-8c34-4521-a74b-2243cc7c00dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f7a66bc2-c498-4bdf-8f72-7baaa16ea4c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"95071171-160e-4687-b01e-6d4bf456add5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"298cd6d4-14ed-4ba1-9e3b-1f43599f2aa1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"22ec2e62-694f-42f7-b23c-228db2428f24","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"8958db40-b460-4d8d-a34f-46142d090dfe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f0bee8b9-b119-4a5c-85f4-1e2732f869ad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2466dd69-e998-4df7-b723-44ac692ec36c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"68f08830-cebc-422c-917d-c1a4bd154ff2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"8221deec-3e19-4d3a-856b-243b52fc1d8f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"26a17ecd-67de-4c1f-a009-03e158c715be","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"521e8628-c166-44d3-8b81-082a311a008a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d692691d-fe3f-456c-85a3-743bf7964ba4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4eb14882-b221-4015-9ce2-5d7b908630a0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1b4af536-d401-4a8f-a154-c9e4a9bba09a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2e746b27-0212-4178-819a-63a0b1fcf536","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0a062ef0-5e0a-405c-9af3-793a86dc2bed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c60d2ee2-e43b-4daa-b1e1-0f614385718d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"85f46826-622d-4419-a26d-ce12d71de45e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c23fbae9-90e7-423a-a9d8-dd57050469c6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4ac3a767-3d9a-4efa-b48d-d13e33f0da7d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]

Vanilla JS GSAP Setup

Engineered for Performance

Modular Core

Glassmorphism

Fluid Motion

Why modular?

Vanilla JS
GSAP Setup