skills.rest
franzenjb
franzenjbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

generative-scroll-art

Generate long-scroll SVG art with GSAP ScrollTrigger animations.

Updated Aug 23, 2026
Search Tags:#composition#svg#generate#references#gsap#parallax#scroll
One-click install
npx skills add https://github.com/franzenjb/claude-skills --skill generative-scroll-art
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generative-scroll-art
Source: https://github.com/franzenjb/claude-skills/tree/main/generative-scroll-art
Command: npx skills add https://github.com/franzenjb/claude-skills --skill generative-scroll-art

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables designers and developers to create long-scroll generative art experiences inspired by renowned artists, reducing the complexity of building immersive scrolling visuals from scratch.

Core Features & Use Cases

  • SVG-based shape generation using bezier curves and controlled negative space for organic forms.
  • GSAP ScrollTrigger-driven animation to create parallax, idle motion, and layered depth as the user scrolls.
  • Artist reference integration via the references/ directory to guide style and composition.
  • Color and composition governance with disciplined palettes, layer relationships, and breathing room for gallery-quality pieces.
  • Use Case: Build immersive online art experiences, portfolio pieces, or digital installations that reveal content as users scroll.

Quick Start

Provide a starting prompt to generate a scrolling art piece inspired by a given artist and palette.

Frequently Asked Questions about generative-scroll-art

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

FAQPage Schema
How do I create scroll-based parallax animations using SVG and GSAP?▼

You can create scroll-based parallax animations by generating SVG shapes with bezier curves and binding them to GSAP ScrollTrigger. This approach builds immersive, kinetic web experiences that reveal content progressively as users scroll.

How does reference-driven composition work for generative art?▼

Reference-driven composition uses curated rules from an artist reference directory to guide style, color palettes, and layer relationships. This governs the generated SVG shapes to ensure gallery-quality visual output.

Can I use GSAP ScrollTrigger for layered depth and idle motion in web art?▼

Yes, GSAP ScrollTrigger drives parallax, idle motion, and layered depth in web-based generative art. It synchronizes SVG shape animations with user scrolling to create kinetic visual projects.

What is the best way to build a long-scroll generative art portfolio piece?▼

The best way to build a long-scroll generative art piece is combining SVG bezier curve generation with GSAP ScrollTrigger. This method applies disciplined color palettes and negative space to reveal content progressively.

Do I need external dependencies to generate scrolling SVG animations?▼

No external dependencies are required to generate scrolling SVG animations. The process relies on internal SVG shape generation, GSAP ScrollTrigger logic, and reference-driven style rules to govern composition directly.

Related Skills

Explore More Design & Creative Skills→
CesarAugustusGroBCesarAugustusGroB

art-style-creator

Generate a complete Art Style Guide with color palettes, typography, and mood guidelines.

Community
Advanced
TumeloRamaphosaTumeloRamaphosa

gsap-scrolltrigger

Create scroll-synchronized GSAP animations with ScrollTrigger configurations.

Community
Advanced
Carlosfwd86Carlosfwd86

gsap-scrolltrigger

Build scroll-driven animations with GSAP ScrollTrigger for pinned sections and reveals.

Community
Advanced
rakibulismrakibulism
2

design-engineer

Plan and review WebGL and motion-heavy web experiences with performance guardrails.

Community
Advanced