skills.rest
timikalo7
timikalo7COMMUNITY
Explore all skills by this author →
GitHub

premium-scroll-flow

Implements smooth scroll, scroll-triggered reveals, and editorial typography for premium landing pages.

Updated Jun 9, 2026
Search Tags:#landing page#next.js#framer-motion#lenis#scroll animation#smooth scroll#editorial design
One-click install
npx skills add https://github.com/timikalo7/Execute --skill premium-scroll-flow-timikalo7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: premium-scroll-flow
Source: https://github.com/timikalo7/Execute/tree/main/.claude/skills/premium-scroll-flow
Command: npx skills add https://github.com/timikalo7/Execute --skill premium-scroll-flow-timikalo7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lenis.

What problem does it solve? Landing pages often get rejected as generic or templated because they lack the flow and editorial signatures of premium reference sites. This Skill turns an admired reference site into a concrete, implemented look instead of guessing what makes it feel premium. ## Core Features & Use Cases - Reference Mining: Fetches a reference site's HTML and detects its smooth-scroll libraries, scroll-interaction hooks, font pairings, and editorial tells so you reproduce concrete signatures rather than a vague vibe. - Lenis Smooth Scroll Setup: Mounts Lenis once at the app root with a requestAnimationFrame loop, anchor routing with nav offset, required CSS, and prefers-reduced-motion handling. - Scroll Reveals & Editorial Signatures: Provides a shared Reveal/RevealGroup primitive with calm once-only animations, oversized section numerals, dramatic serif/grotesk font mixing, and full-bleed cinematic imagery. - Use Case: A stakeholder links an Awwwards-winning agency site and says the current Next.js landing page feels like a boring standard site. Use this Skill to mine that reference, then implement Lenis smooth scroll, staggered reveals, italic-serif accent words, and verify the result with headless screenshots on both themes and mobile. ## Quick Start Use the premium-scroll-flow skill to make my Next.js landing page feel like this reference site, with smooth scroll and editorial typography.

Frequently Asked Questions about premium-scroll-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add smooth scrolling to a Next.js site with Lenis?▼

Install lenis with npm, then create one root client component that instantiates new Lenis with a duration around 1.1 and smoothWheel enabled, driven by a single requestAnimationFrame loop calling lenis.raf. Add the Lenis CSS rules and disable it entirely under prefers-reduced-motion.

How do I make a landing page feel premium instead of generic?▼

Mine a reference site's HTML for its concrete signatures: smooth-scroll libraries, scroll-interaction hooks, font pairings, and editorial tells like oversized section numerals. Then implement equivalents with Lenis smooth scroll, calm scroll-triggered reveals, and a serif-grotesk font mix.

Does Lenis work with framer-motion useScroll?▼

Yes, Lenis coexists with framer-motion's useScroll because useScroll reads the window scroll position, which Lenis drives. Mount Lenis once at the root and your scroll-linked framer-motion animations continue to work.

How do I handle reduced motion with scroll animations?▼

Disable Lenis entirely under prefers-reduced-motion by returning early and rendering nothing. For reveal animations, render the final state with no offset by setting initial to false when reduced motion is detected.

Why does my scroll animation cause horizontal overflow on mobile?▼

Scroll-in transforms that enter on the X axis commonly cause horizontal overflow at mobile widths. Enter elements on the Y axis instead, and verify with a 390px headless Chromium context asserting documentElement.scrollWidth stays within innerWidth.

Related Skills

Explore More Design & Creative Skills→
willhammondhimselfwillhammondhimself

fonts

Select distinctive typography for Next.js projects with pairing guidelines.

Community
Intermediate
stencilastencila
902

snap

Capture screenshots of Stencila documents and inspect rendered output for visual verification.

Official
Basic
gooseworks-aigooseworks-ai
6

A13-editorial-photo-headline

Generate motion graphics scenes with Ken-Burns pan effects and serif italic word transitions.

Official
Advanced
sameerthedevelopersameerthedeveloper

cinematic-editorial-noir

Generate cinematic editorial UI patterns with Tailwind-compatible components and typography scales.

Community
Advanced