lumnistic

Build cinematic, motion-rich, scroll-driven websites — award-style pages with smooth inertia scrolling, scrollytelling, pinned/parallax sections, WebGL/Three.js heroes, page-transition wipes, animated text, custom cursors, and stacked cards. Use WHENEVER the user wants any of: GSAP, ScrollTrigger, ScrollSmoother, Lenis, Locomotive Scroll, smooth/inertia scrolling, parallax, horizontal scroll sections, scrollytelling, pinned sections, scroll reveals, WebGL or Three.js, shader/image-distortion effects, real-time rendering, page/route transitions, loading or skeleton screens, hover micro-interactions, custom cursors, stacked/sticky cards, DrawSVG, MotionPath, Flip layout transitions, SplitText, typewriter, or stop-motion/stepped animation. Also trigger when the user asks to make a site feel "cinematic", "premium", "interactive", or "like awwwards", even without naming a library. Consult before writing code so the smooth-scroll/ScrollTrigger wiring, plugin registration, performance, and accessibility are correct.

Use this skill whenever the user wants to animate web content with GSAP (GreenSock Animation Platform). Trigger for any request involving GSAP, tweens, timelines, ScrollTrigger, ScrollSmoother, SplitText, Flip, Draggable, MorphSVG, DrawSVG, MotionPath, Observer, scroll-linked animation, parallax, pinned sections, staggered reveals, text/SVG animation, hover micro- interactions, or page-entrance choreography. Also trigger when the user asks to "animate", "add motion to", or "transition" HTML/React/Vue/Svelte/Webflow content and GSAP is the right tool. Always consult this skill before writing GSAP code so version, plugin registration, and cleanup are correct.