Engineering Stories•June 18, 2026•5 min read•By Ashfaque
Inside the Code: Building Smooth 60FPS Desktop Animations
How we optimized our category workspaces and database search queries to render at a buttery smooth 60 frames per second using React 19 and Framer Motion.
Building desktop applications with web technologies can sometimes feel sluggish. To ensure Pastily runs at a buttery smooth 60 frames per second, we implemented several optimization tricks.
Layout Projection
We used Framer Motion's layoutId for clean transitions between search category tabs without recalculating layouts, keeping tab switches extremely fast.
Hardware Acceleration
GPU-accelerated transforms (translate3d) avoid layout repaints. We offload heavy animations to the graphics card, preserving CPU cycles for your active editor.
SQLite Indexing
Indexing fields like category and timestamp makes database query responses sub-millisecond, even with thousands of items. The search input instantly filters results without blocking the UI thread.