TechnicalCollectible prompt

Cut the gratuitous animation from your site

Audit every animation, keep the ones that explain a change, and cut the rest for a faster site.

Claude CodeCursorCodex

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Cut the gratuitous animation from your site

Act as a senior motion designer and performance engineer. Audit the animation on {{website_url}}, built with {{tech_stack}}, and cut everything that doesn't earn its place. Read the styles, components and animation libraries first. Keep the current framework, components and routes, and change nothing until I approve the list. 1. Inventory every animation: CSS transitions and keyframes, motion libraries, Lottie files, autoplay video, carousels, smooth scrolling, parallax and scroll-triggered effects. Note where each runs and how long it takes. 2. Judge each with one test: does it explain a change? Feedback that an action worked, where something came from or went, or what changed state. If it only decorates, it goes. 3. Common cuts: fade-up on every section, floating or bobbing text and blobs, pulsing live dots, typewriter headlines, endless gradient shifts, hover scale on cards you can't click, counters with unsourced stats, bouncing scroll arrows, entrance animations that delay the first screen, and loaders shown longer than the wait. 4. Simplify what stays: one duration scale (150ms for feedback, 200 to 300ms for menus and dialogs), ease-out cubic-bezier(0.2, 0, 0, 1), transform and opacity only, and a prefers-reduced-motion version that removes movement. 5. Measure before and after on a mid-range phone with 4x CPU throttling: JavaScript shipped for animation, Largest Contentful Paint, Interaction to Next Paint, layout shift and frame rate. Budget: no layout shift from motion, no long task over 50ms, and any animation library no longer needed removed. Return a table: element, what it does, verdict (keep, simplify or cut) and the reason. After I approve, make the changes and report the measured difference.
Technicalnvoka.com/library/nvoka-remove-gratuitous-animation-from-your-siteScan to open
Technical

Cut the gratuitous animation from your site

Audit every animation, keep the ones that explain a change, and cut the rest for a faster site.

Nvoka logo

Curated by Nvoka

Claude CodeCursorCodex
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 2 filled

Your prompt

Act as a senior motion designer and performance engineer. Audit the animation on {{website_url}}, built with {{tech_stack}}, and cut everything that doesn't earn its place. Read the styles, components and animation libraries first. Keep the current framework, components and routes, and change nothing until I approve the list. 1. Inventory every animation: CSS transitions and keyframes, motion libraries, Lottie files, autoplay video, carousels, smooth scrolling, parallax and scroll-triggered effects. Note where each runs and how long it takes. 2. Judge each with one test: does it explain a change? Feedback that an action worked, where something came from or went, or what changed state. If it only decorates, it goes. 3. Common cuts: fade-up on every section, floating or bobbing text and blobs, pulsing live dots, typewriter headlines, endless gradient shifts, hover scale on cards you can't click, counters with unsourced stats, bouncing scroll arrows, entrance animations that delay the first screen, and loaders shown longer than the wait. 4. Simplify what stays: one duration scale (150ms for feedback, 200 to 300ms for menus and dialogs), ease-out cubic-bezier(0.2, 0, 0, 1), transform and opacity only, and a prefers-reduced-motion version that removes movement. 5. Measure before and after on a mid-range phone with 4x CPU throttling: JavaScript shipped for animation, Largest Contentful Paint, Interaction to Next Paint, layout shift and frame rate. Budget: no layout shift from motion, no long task over 50ms, and any animation library no longer needed removed. Return a table: element, what it does, verdict (keep, simplify or cut) and the reason. After I approve, make the changes and report the measured difference.
See all