If you are building a fitness app, a theme switcher is easy until it reaches the exercise media.
Cards, buttons, progress bars, and typography can all follow design tokens. Then an exercise animation arrives with a white background. Dark mode gets a white square. A brand gradient makes the figure look pasted on. A second white-label customer needs another export of the same movement.
That is not a CSS problem. It is an asset problem.
I build and sell RepDB Standard, the library used in the examples below. It combines transparent backgrounds, smooth looping animations, and one consistent character. That lets the exercise keep its visual identity while your app changes the theme.
The short version
Use transparent exercise media as the theme-independent master:
- dark mode, light mode, gradients, and brand colours can all use the same file;
- white-label apps do not need a separate animation export for every client palette;
- stills belong in lists and cards, while motion loads on an exercise detail screen;
- an MP4 can be generated later when a fixed-background player needs play/pause/seek.
The important separation is simple: the asset owns the exercise, and the app owns the surface behind it.
Why a white background breaks a theme
An image with a flattened white background contains white pixels. The browser cannot tell whether a pixel is part of the figure, a highlight, a white piece of equipment, or the old background.
Changing the CSS behind that image does not remove those pixels. filter, opacity, and mix-blend-mode can hide the problem in one composition, but they cannot reliably reconstruct the figure's edges. The result is usually a white panel, a halo, or an exercise whose own highlights have been altered.
The common fallback is to put every exercise inside a white card. That is fine if white is the permanent product surface. It becomes technical debt as soon as the app adds dark mode, coach themes, seasonal palettes, gradients, or a white-label customer.
One animation, many surfaces
The transparent version lets the UI choose the surface at render time:
<div class="exercise-media">
<img
src="/animations/mountain-climbers.webp"
width="960"
height="960"
alt="Mountain Climbers"
>
</div>
.exercise-media {
background: var(--surface);
border-radius: 1rem;
overflow: hidden;
}
--surface can be a dark colour, a cream card, a brand gradient, or a customer-specific theme token. The animation does not change, and no image editor is involved.
The movement stays the same while the app skin changes around it: navigation, cards, metrics, accents, and the surface can all belong to the product or white-label customer.
The MP4 is not wrong when the background is intentionally fixed. It is wrong as the only source asset, because the next surface change requires a new render. Keep the transparent master; create a baked-background derivative when the screen actually benefits from video controls or smaller delivery.
What to ship on each screen
| Screen | Delivery | Reason |
|---|---|---|
| Exercise search and library | Transparent still WebP | Small and easy to scan |
| Workout cards | Transparent poster | Keeps a grid light while following the theme |
| Exercise detail | Transparent animated WebP on demand | The user is studying the movement |
| Fixed branded player | MP4 derived from the chosen surface | Proper play/pause/seek and smaller bytes |
Do not autoplay a full catalogue just because the files are animated. A 960px motion asset is much heavier than a poster, and many simultaneous clips compete for decode time. The useful default is still-first, one active animation, and explicit playback when someone opens or selects an exercise.
The product payoff
Transparent exercise media is more than a format choice. It makes these product features cheaper to maintain:
- Dark mode without a second image library.
- Custom brand palettes without re-rendering hundreds of movements.
- White-label apps that share one content source.
- Gradient and photo surfaces without visible rectangles.
- Rounded or circular containers without a square background.
- Future redesigns where the source asset survives the next visual system.
That is why I would treat transparency as part of the product architecture. If changing the theme requires opening an image editor, the media pipeline has coupled itself to the UI.
Where RepDB Standard fits
Choose RepDB Standard when your fitness app needs smooth looping exercise animations, transparent backgrounds, and one consistent character across the library. The same classic asset works on light, dark, and brand surfaces. You can also generate an MP4 derivative for a player with a fixed background.
The paid September 4, 2026 snapshot has 608 exercise records: 496 with motion clips and 112 with static illustrations. Standard is $499 once, including transparent classic assets, classic + flat stills, JSON/SQLite, workout templates, and embeddings. You host the files, with commercial use in your own products and no required attribution. Motion coverage counts exercise records; close variants can share a clip.
The theme technique also works for client-branded apps, but third-party branded deployments require Custom, starting at $999. Standard covers your own products under your own brand.
The separate 601-exercise Free Tier is a useful starting point for JSON and flat 512×512 stills with attribution. Transparent classic assets and production animation rights are Standard features. The preview is evaluation-only.
Try one movement in your actual design
- Open the animation preview and choose a movement your app needs.
- Use the evaluation sample on a light card, a dark screen, and your brand gradient.
- Check the character, motion, edges, and target size in your layout.
- If it fits, choose Standard for production use in your own app.
Browse the animation preview →
The original article includes the interactive surface demo. For file sizes and an MP4 conversion recipe, see the measured WebP vs MP4 comparison.
The useful test is simple: can the same exercise asset fit your next theme without editing the artwork?
Top comments (3)
So far, this is the best I've found in terms of image and animation quality. And, of course, it's very easy to use and highly reliable since there's no API—meaning you're not dependent on a third-party project.
That's great! 👏🏻
Like it! The assets look seriously impressive.