TechnicalCollectible prompt
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.
Curated by Nvoka
Claude CodeCursorCodex
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 filledYour 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.