Immersive scroll-driven storytelling homepage (Three.js + GSAP + Lenis) - #10
Open
farhanashrafdev wants to merge 2 commits into
Open
Immersive scroll-driven storytelling homepage (Three.js + GSAP + Lenis)#10farhanashrafdev wants to merge 2 commits into
farhanashrafdev wants to merge 2 commits into
Conversation
- Seven-chapter narrative (Prologue → Origin → Practice → Pillars → The Field → The Creed → The Door) using real CNSPK content - Three.js painted-texture WebGL background with domain-warped fbm that flows and reacts to the cursor; palette transitions per chapter - GSAP ScrollTrigger cinematic reveals: masked line headlines, staggered rises, parallax drift, animated stat count-ups - Lenis.js smooth scroll fed into ScrollTrigger - Fixed chapter counter with scroll-progress rail - Graceful fallbacks: CSS gradient when WebGL/libs unavailable, full prefers-reduced-motion support (no smooth scroll, content shown) - CSP updated to allow cdn.jsdelivr.net module imports - Add vercel.json (cleanUrls, trailingSlash, security + cache headers) Navbar/Footer, brand tokens, and all other routes untouched. Co-authored-by: Farhan Ashraf <53370109+farhanashrafdev@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Rebuilds the site homepage into a scroll-driven “chapter” experience with a Three.js shader background and GSAP/Lenis-driven reveals, plus adds a Vercel configuration for clean URLs, trailing slashes, security headers, and asset caching.
Changes:
- Replaces
index.htmlwith a seven-chapter, scroll-triggered storytelling layout (painted WebGL background + GSAP ScrollTrigger + Lenis). - Updates homepage CSP to allow ES-module imports from
cdn.jsdelivr.net, and adds performance preconnects. - Adds
vercel.jsonto configure clean URLs/trailing slashes, baseline security headers, and cache headers.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
vercel.json |
Adds global security headers and caching behavior for static assets. |
index.html |
Implements the immersive scroll-driven homepage (shader canvas, chapter sections, GSAP/Lenis wiring, CSP adjustments). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1
to
+21
| { | ||
| "cleanUrls": true, | ||
| "trailingSlash": true, | ||
| "headers": [ | ||
| { | ||
| "source": "/(.*)", | ||
| "headers": [ | ||
| { "key": "X-Content-Type-Options", "value": "nosniff" }, | ||
| { "key": "X-Frame-Options", "value": "SAMEORIGIN" }, | ||
| { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }, | ||
| { "key": "Permissions-Policy", "value": "geolocation=(), microphone=(), camera=()" } | ||
| ] | ||
| }, | ||
| { | ||
| "source": "/(.*)\\.(js|css|png|jpg|jpeg|svg|webp|ico|woff2)", | ||
| "headers": [ | ||
| { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } | ||
| ] | ||
| } | ||
| ] | ||
| } |
Member
Author
|
/kiro fix check these copilot comments and give me your feedback on them, use opus 4.8 |
Addresses Copilot review on PR #10. The site serves stable, unversioned asset URLs (/js/Navbar.js, /css/tokens.css), so a 1-year immutable cache made clients run stale code/styles after deploys. - JS/CSS: public, max-age=0, must-revalidate (revalidate via ETag, 304 when unchanged) - Images/fonts: public, max-age=86400, stale-while-revalidate=604800
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request was created by @kiro-agent on behalf of @farhanashrafdev 👻
Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro Web
What this does
Rebuilds the homepage (
index.html) as a scroll-driven cinematic story. Each scroll section is a "chapter" that animates in as a scene, over a painted WebGL background whose colours flow fluidly from one chapter to the next.The four requested features
Prologue → Origin → Practice → Pillars → The Field → The Creed → The Door). Each chapter owns a colour palette; the background eases between palettes as you scroll.Content
Uses real CNSPK content — 280+ engineers, 11 events, 3 cities, the four pillars (Rigor / Belonging / Bridge / Practice), real event titles, and the
kubectl apply -f pakistan.yaml/ "Read the CVE. Drink the chai." voice.Robustness
prefers-reduced-motion: disables smooth scroll + shader motion and reveals all content immediately.cdn.jsdelivr.netES-module imports.Also
vercel.json(cleanUrls,trailingSlash, security + cache headers) so the preview deploy serves routes cleanly.Testing
vercel.json), 7 chapters present, all three library refs resolve, Navbar/Footer imports match the existing component API, and all CSS tokens referenced exist intokens.css.Known limitations