Making Your Despia App Feel Super Native with CSS

One of the best things about building with Despia is how your app runs with native-level performance out of the box. The runtime is hardware-accelerated and tuned for modern devices, so your UI can feel just as smooth as apps written directly in Swift or Kotlin.

But here’s a detail many developers miss:

If you want your app to feel extra smooth on modern devices, though, you can unlock GPU acceleration with a few lines of CSS.

Why CPU Animations Aren’t Always Enough

CPU-driven animations work fine for simple transitions. But when you’re sliding in a drawer, animating a modal, or moving a bottom sheet, the CPU can start to struggle. That’s when you’ll notice stutter or frame drops.

On both iOS and Android, the solution is to push those animations to the GPU. That’s where the motion becomes fluid and “native-feeling.”

The GPU Unlock

Here’s how to enable GPU-friendly animations everywhere:

/* Default: GPU-safe animations */
.drawer {
  will-change: transform;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.3s ease-out;
}

/* Motion accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition: none !important;
    transform: none !important;
  }
}

Why This Matters in Despia

Despia is already optimized for native performance. By default, it keeps animations on the CPU for cross-platform consistency. That’s a smart default, not every device handles GPU transforms equally well.

But on modern devices it’s safe, and recommended, to switch drawers, panels, and other heavy UI transitions to GPU transforms. That’s how you unlock the last 10% of polish.

When to Use It

• Drawers & side menus, biggest payoff since they move large chunks of UI.

• Bottom sheets & modals, keeps them sliding smoothly.

• Interactive panels, anything the user swipes or drags.

• Low-end or motion-sensitive devices, fall back gracefully with prefers-reduced-motion.

Wrap Up

Despia gives you a runtime that’s already tuned for native performance. CPU animations are the default for compatibility, but by switching to GPU transforms you can let the hardware handle it:

will-change: transform;
transform: translate3d(-100%, 0, 0);

It’s a small tweak, but it makes your app feel super native where it matters most. Your users won’t see the code, but they’ll definitely feel the difference when they swipe open that drawer.