skills.rest
Aurora-AI
Aurora-AICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

cinematographer

Transform static HTML into cinematic web experiences with GSAP, ScrollTrigger, and Lenis.

1|Updated Feb 2, 2026
Search Tags:#gsap#parallax#lenis#scrolltrigger#web-animations#cinematography
One-click install
npx skills add https://github.com/Aurora-AI/Certum- --skill cinematographer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cinematographer
Source: https://github.com/Aurora-AI/Certum-/tree/main/.agent/skills/antigravity-skills/effects
Command: npx skills add https://github.com/Aurora-AI/Certum- --skill cinematographer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps convert statically coded HTML into cinematic, animation-rich experiences suitable for high-end showcases, reducing manual animation workload.

Core Features & Use Cases

  • Hero & section entrances with GSAP-driven motion and parallax backgrounds
  • Microinteractions: magnets, hover effects, and scroll-triggered reveals
  • Workflow flexibility: works with Stitch-like contexts to apply cinematic transforms
  • Use Case: A static landing page is transformed into a premium, cinematic journey with minimal source changes

Quick Start

Use the cinematographer skill to animate the hero section of your attached HTML, by loading GSAP + ScrollTrigger + Lenis via CDN and injecting a single script block with the animation routines.

Frequently Asked Questions about cinematographer

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

FAQPage Schema
How do I add GSAP scroll animations to static HTML?▼

Add GSAP scroll animations to static HTML by loading the GSAP suite and Lenis via CDN, then injecting a script block containing ScrollTrigger routines to drive section reveals and multi-layer parallax.

How does Lenis integrate with GSAP ScrollTrigger for parallax?▼

Lenis integrates with GSAP ScrollTrigger by synchronizing smooth scroll events with animation timelines, enabling seamless multi-layer parallax backgrounds and scroll-triggered reveals across web pages.

What's the best way to create cinematic hero sections with GSAP?▼

The best way to create cinematic hero sections with GSAP is applying ScrollTrigger motion routines and parallax backgrounds to static HTML, transforming it into a premium journey with minimal source changes.

Do I need to install GSAP and Lenis to use web animations for section reveals?▼

You need GSAP and Lenis loaded via CDN or installed in your project to execute web animations for section reveals, as these dependencies drive the scroll-triggered motion and parallax effects.

Can I apply microinteractions like hover effects to static HTML without manual animation work?▼

You can apply microinteractions like hover effects and magnets to static HTML without manual animation work by injecting GSAP routines that automatically bind cinematic transforms to your elements.

Related Skills

Explore More Design & Creative Skills→
VXerysVXerys

scaffold-gsap-scrolltrigger

Generate React/Next.js components with GSAP ScrollTrigger for scroll animations.

Community
Intermediate
iangcastill0iangcastill0

video-to-website

Convert video files into scroll-driven animated websites with GSAP and canvas.

Community
Advanced
Aurora-AIAurora-AI
1

antigravity-skills

Transforms static HTML into cinematic, web-ready experiences using Draupnir's spectral powers.

Community
Advanced
wyrmspirewyrmspire

video-to-website

Convert video files into scroll-driven animated websites with FFmpeg, GSAP, and Lenis.

Community
Advanced