Step 6 — Roadmap Microsite (Agent: Composer) #18
Conversation
- Built scroll-driven animated microsite with Next.js 14 - Integrated Notion API to fetch Product Roadmap database - Implemented milestone sections ($25M, $50M, $75M, $100M MC) - Added 'One-Person $1B Company' vision narrative section - GSAP ScrollTrigger animations with parallax effects - Optional token-gating UI (Unlock Protocol ready) - Mobile-responsive design with Tailwind CSS - Complete documentation and deployment guides
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This is the final PR Bugbot will review for you during this billing cycle
Your free Bugbot reviews will reset on December 1
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| scrub: true, | ||
| }, | ||
| }) | ||
| }, [milestone]) |
There was a problem hiding this comment.
Bug: MilestoneSection GSAP animations lack proper cleanup logic
The useEffect hook creates GSAP animations and ScrollTriggers but doesn't clean them up when the effect runs again. When milestone changes, new animations are registered without destroying the previous ones, causing ScrollTrigger instances to accumulate and leading to memory leaks and unexpected animation behavior.
| scrub: true, | ||
| }, | ||
| }) | ||
| }, []) |
There was a problem hiding this comment.
Bug: VisionSection GSAP animations lack proper cleanup logic
The useEffect hook creates multiple GSAP ScrollTrigger animations but doesn't implement cleanup. While the empty dependency array prevents repeated setup, if this component ever unmounts and remounts, ScrollTriggers won't be properly destroyed, potentially causing memory leaks and animation conflicts.
| } | ||
| ) | ||
| }) | ||
| }, [roadmapData, filter]) |
There was a problem hiding this comment.
Bug: RoadmapSection animations missing ScrollTrigger cleanup
The useEffect creates ScrollTrigger animations for roadmap items whenever roadmapData or filter changes, but never cleans up previous triggers. This causes ScrollTrigger instances to accumulate every time the filter is applied, leading to memory leaks and multiple animations triggering for the same elements.
| }, | ||
| }) | ||
| }, | ||
| }) |
There was a problem hiding this comment.
Bug: Milestone number animation has mismatched initial and target types
The milestone number animation attempts to animate innerHTML from an initial string value like "25M" (set in JSX at line 93) to a numeric value. GSAP cannot reliably animate between incompatible types; the initial content should be numeric or the animation should handle the string-to-number conversion explicitly during setup rather than relying on GSAP's internal parsing.
Overview
Built a scroll-driven, animated microsite that publicly shares the BearifiedCo roadmap, token vision, and the "One-Person $1B Company" narrative. The site dynamically pulls data from Notion's Product Roadmap database and displays it in an immersive, scroll-triggered experience.
Features Implemented
✅ Core Functionality
Tech Stack
Documentation
roadmap-microsite/README.mdroadmap-microsite/DEPLOYMENT.mdnotion/founder-step6-roadmap-composer.mdNext Steps
NOTION_API_KEYenvironment variableNote
Introduces a Next.js-based animated roadmap microsite that fetches roadmap data from Notion, features milestone/vision sections, filtering, and optional token-gated access.
roadmap-microsite/withapp/router (layout.tsx,page.tsx,globals.css).HeroSection.tsx,MilestoneSection.tsx,VisionSection.tsx,RoadmapSection.tsx,TokenGate.tsx.app/api/roadmap/route.ts: Notion API integration querying database2b26468866ef8093a5bfe0775e96abda, mapping properties to typed items.TokenGate.tsx) with MetaMask flow; Unlock Protocol placeholders.package.json.README.md,DEPLOYMENT.md,IMPLEMENTATION_SUMMARY.md, and Notion writeup.Written by Cursor Bugbot for commit a1e932b. Configure here.