skills.rest
OthmanAdi
OthmanAdiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gmira-scroll

Orchestrate scroll-driven UI interactions with single-source-of-truth scroll progress.

Updated Jul 25, 2026
Search Tags:#performance#animation#ui-ux#framer-motion#web-design#scroll
One-click install
npx skills add https://github.com/OthmanAdi/gmira --skill gmira-scroll
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gmira-scroll
Source: https://github.com/OthmanAdi/gmira/tree/main/skills/gmira-scroll
Command: npx skills add https://github.com/OthmanAdi/gmira --skill gmira-scroll

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the common issue of repetitive, uninspired scroll animations that make websites feel like generic templates. It prevents performance-heavy layout thrashing and ensures scroll-driven interactions feel intentional and performant.

Core Features & Use Cases

  • Authored Moments: Implements the one-authored-moment rule to ensure scroll-driven animations serve the page's argument rather than just filling space.
  • Performance Optimization: Provides patterns for scroll-driven animations that avoid layout reads, ensuring smooth 60fps performance even on complex pages.
  • Use Case: Use this when building complex landing pages with sticky card stacks, parallax effects, or scrub-driven timelines to ensure they are performant, accessible, and visually distinct.

Quick Start

Use the gmira-scroll skill to implement a pinned sticky card stack that scales based on scroll progress while ensuring zero layout reads.

Frequently Asked Questions about gmira-scroll

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

FAQPage Schema
How do I prevent layout thrashing when building scroll-driven UI animations?▼

Prevent layout thrashing in scroll-driven UI by enforcing a single-source-of-truth for scroll progress and avoiding layout reads during scroll events. This ensures smooth 60fps performance by leveraging efficient compositor-layer usage and passive event handling.

What is the one-authored-moment rule for scroll animations?▼

The one-authored-moment rule for scroll animations ensures that every scroll-driven interaction serves the page's narrative argument rather than just filling space. This prevents repetitive, uninspired animations and makes complex web interfaces feel intentional and visually distinct.

How do I build a pinned sticky card stack that scales based on scroll progress?▼

Build a pinned sticky card stack by orchestrating scrub-driven timelines tied to a single scroll progress source. Ensure zero layout reads by using passive event handling and compositor layers, allowing the card stack to scale smoothly without performance degradation.

How do I add reduced-motion accessibility to scrub-driven timelines and parallax effects?▼

Add reduced-motion accessibility to scrub-driven timelines by satisfying reduced-motion requirements within your scroll progress orchestration. This ensures pinned sections and parallax effects respect user accessibility preferences while maintaining performant compositor-layer animations.

Related Skills

Explore More Design & Creative Skills→
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
ZouZouZouZou

Dashboard & Analytics Skill

Create analytics dashboards for admin, instructor, and student roles.

Community
Advanced
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
deomiarndeomiarn

animation-library

Implement UI animations with Framer Motion, CSS, and scroll-triggered effects.

Community
Intermediate