GPU acceleration
Also called hardware acceleration or compositing
A browser technique where the graphics chip moves, fades, or scales an element on its own layer instead of redrawing the page every frame.
import { Dialog } from '@base-ui/react/dialog';
const items = [
{ name: 'Stoneware mug', price: '$24' },
{ name: 'Linen apron', price: '$38' }
];
export function CartDrawer() {
return (
<Dialog.Root>
<Dialog.Trigger className='rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted'>
Cart (2)
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Backdrop className='fixed inset-0 bg-black/30 transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0' />
{/* Only translate and opacity change, so the browser can skip layout and
paint and let the GPU composite each frame. Never animate right or width. */}
<Dialog.Popup className='fixed inset-y-0 right-0 flex w-80 flex-col gap-4 border-l bg-background p-6 shadow-xl outline-none transition-[translate,opacity] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:data-ending-style:translate-x-full motion-safe:data-starting-style:translate-x-full'>
<Dialog.Title className='text-base font-semibold'>
Your cart
</Dialog.Title>
<ul className='flex flex-col divide-y text-sm'>
{items.map((item) => (
<li key={item.name} className='flex justify-between py-3'>
{item.name}
<span className='tabular-nums'>{item.price}</span>
</li>
))}
</ul>
<Dialog.Close className='mt-auto rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'>
Check out
</Dialog.Close>
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
);
}Make the cart drawer animation GPU-friendly: animate only transform: translateX() and opacity over 300ms with cubic-bezier(0.23, 1, 0.32, 1), replace any left, right, or width transitions, and keep the drawer at its final position when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is GPU acceleration?
Browsers draw a page in stages: calculate styles, lay out the boxes, paint the pixels, then composite the painted layers into the final image. Some elements get their own layer, a separate bitmap that the GPU can move around cheaply. When an animation changes only transform or opacity on such a layer, the browser can usually skip layout and paint and just composite again.
That is why the standard advice for smooth motion is to move things with translate() instead of top or left, resize them with scale() instead of width and height, and fade them with opacity. CSS transitions and animations of these properties can often keep running smoothly even while JavaScript is busy.
Layers are not free. Each one keeps its own bitmap in memory, and too many slow the page down, especially on phones. Old tricks like adding translateZ(0) to everything create layers you may not need. Let the browser promote what animates, and check the Layers panel in Chrome DevTools when you are unsure.
Often confused with
- will-change
will-changeis a hint that asks the browser to prepare a layer ahead of time. GPU acceleration is the compositing work itself.
Related terms
All termswill-change
A CSS property that tells the browser an element is about to animate, so it can prepare, often by giving the element its own layer ahead of time.
Layout thrashing
A slowdown caused by code that alternates style changes with size reads, forcing the browser to recalculate layout many times in one frame.
Jank
Visible stutter in an animation or scroll, caused when the browser misses frames because it cannot finish its work in time.
Translate
A CSS transform that moves an element along the x or y axis while the layout around it stays exactly where it was.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.