Back to prompts
PROMPT_014 / PERFORMANCE

KEEP IT AT 60 FPS.

Finds and rewrites the animations that are quietly costing frames.

BEST FOR
Sites that stutter while scrolling.
DIFFICULTY
Intermediate
TOOLS
Lovable · Cursor · Claude Code
USE THIS IN LOVABLE
Do a motion performance pass on this codebase.

Find and fix: animations on width, height, top, left, margin or padding (rewrite as transform), large or animated blur values, continuously running animations that are off-screen (pause with IntersectionObserver), scroll or pointer handlers that read layout every event (batch inside requestAnimationFrame and cache rects), will-change left on permanently, and simultaneous mounting of many heavy previews (lazy-mount on intersection).

Report each issue found, the file, and the fix applied. Target 60fps on a mid-range laptop with the page scrolled at full speed.

---
Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.

RECOMMENDED INTERACTIONS.

INTERACTION_015CSS + JS

Scroll Reveal

Content fades and rises as it enters the viewport.

Scroll / LightView
LOVABLECURSORBOLTV0REPLITWINDSURFLOVABLECURSORBOLTV0REPLITWINDSURF
INTERACTION_022CSS

Logo Marquee

Infinite horizontal scroll with edge fades.

Background / LightView

RELATED PROMPTS.

PROMPT_001 / LANDING PAGES

MAKE MY WEBSITE FEEL EXPENSIVE.

Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.

premiumlanding-pagemicrointeraction
Preview
PROMPT_002 / LANDING PAGES

BUILD A LANDING PAGE THAT LOOKS HIRED.

A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.

premiumlanding-pagedark-ui
Preview
PROMPT_003 / BUTTONS

GIVE MY CTA GRAVITY.

A reusable cursor-following button component with proper touch and reduced-motion fallbacks.

buttonmousepremium
Preview