DEV Community: sergei argutin

Fitness App Themes Without Re-Rendering Exercise Animations

sergei argutin — Fri, 21 Aug 2026 12:28:16 +0000

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 →

Standard details & pricing →

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?

Exercise animations in a fitness app: transparent WebP or MP4? I measured both

sergei argutin — Wed, 12 Aug 2026 09:56:16 +0000

Animated WebP or MP4 for short looping animations? Most write-ups end with "it
depends, measure it", so I measured it on the 442 exercise clips I ship, and
the useful answer turned out not to be a winner but an order of operations.

The asymmetry decides it:

From a transparent clip you can produce anything — composite any background, export MP4, resize per platform, re-theme next quarter. One build command, at the bottom of this post.
From an opaque clip you cannot get the background back. Resize and re-encode still work, but the panel colour is in every pixel: no new theme, no round container, no clean transparency without re-rendering.

So the transparent WebP is the master, and MP4 is a delivery format you
generate from it. Here is what each costs.

I build and sell RepDB Standard, the exercise animation library used for this benchmark. Its smooth looping animations have transparent backgrounds and one consistent character, so the same source fits light, dark, and branded screens. Browse the real animation preview to see the assets behind the measurements.

The measured comparison

Six clips spanning the size range of the catalogue. Every variant re-encoded
from the same source with the same settings (quality 90, method 4, exact
alpha); MP4 is H.264 crf 23, medium preset, composited on #111827:

Clip	WebP 960, transparent	Same, composited (opaque)	MP4 crf 23	MP4 crf 28
Single Leg Glute Bridge	1232 KB	474 KB	71 KB	43 KB
Mountain Climbers	1316 KB	522 KB	100 KB	61 KB
Side-Lying Lateral Raise	2186 KB	1049 KB	94 KB	51 KB
Incline Dumbbell Curl	3387 KB	1381 KB	128 KB	65 KB
One Arm Kettlebell Push Press	4093 KB	1435 KB	152 KB	86 KB
Battle Ropes	5022 KB	1841 KB	419 KB	214 KB

Read it left to right: one master and two things you can make from it, not
three products to choose between.

Fixing the background saves ~2.5x. Same format, same settings, alpha gone —
the median file drops to 39%. That is what the alpha channel costs.

Encoding as video saves another ~8x, because a video codec has interframe
prediction and an animated image format does not. End to end: 3387 KB → 128 KB
for one clip, from a file you already have.

The master is the biggest file in the table. That is what a master is for.

What transparency buys

Not aesthetics — options you would otherwise have to buy again:

Themes as a feature. If users pick or purchase a theme, every asset has to look right on all of them. A transparent figure composites onto whatever the theme sets; an opaque one needs an export per theme, from whoever owns the source artwork.
White-label. The same catalogue in a client's palette, without re-cutting a file.
Dark mode, which is the same problem and catches most teams after launch.
Any container — round avatars, rounded cards, overlays on a photo.
MP4 on demand. Pick the background, run the recipe below, ship video where it helps, regenerate it at the next redesign.

Same movement, both ways, on two surfaces:

The video is a fraction of the bytes and completely correct — on the panel it
was exported for. Move it to a light card and it is simply wrong. Fine, as long
as it is a derivative you can regenerate rather than the only copy you own.

What MP4 costs you back

A twelve-card grid, three ways, every tile at 240 CSS px, Chrome on a desktop
over localhost:

Grid of 12	Bytes	Load	Sustained frame rate
480px stills	0.26 MB	54 ms	56 fps
960px animated WebP	37.92 MB	83 ms	56 fps
MP4, background baked in	1.97 MB	296 ms	28 fps

The MP4 grid moved 20x fewer bytes and ran at half the frame rate: twelve
<video> elements decoding and compositing at once is real work. Pausing
eleven put it back to 56 fps; resuming them dropped it to 28 again.

The WebP row needs a warning label

That 56 fps is the page's frame rate from requestAnimationFrame. An
animated image decodes and rasters outside the page's animation loop, so a clip
can drop half its frames while the page reports a calm 56 — and no browser API
exposes an image's real playback rate. Drawing it to a canvas returns a frozen
frame, not the current one.

The decode work can be measured, with the browser's own ImageDecoder:

const buf = await (await fetch(url)).arrayBuffer();
const dec = new ImageDecoder({ data: buf, type: 'image/webp' });
await dec.tracks.ready;
await dec.completed;

const frames = dec.tracks.selectedTrack.frameCount;
const t0 = performance.now();
for (let i = 0; i < frames; i++) {
  const { image } = await dec.decode({ frameIndex: i });
  image.close();
}
console.log((performance.now() - t0) / frames, 'ms per frame');

Four clips, every frame, best of three passes:

Clip	Frames	960 px	480 px
Mountain Climbers	34	4.48 ms/frame	0.82 ms/frame
Battle Ropes	99	4.61 ms/frame	0.95 ms/frame
Incline Dumbbell Curl	60	5.16 ms/frame	1.09 ms/frame
Side-Lying Lateral Raise	41	5.41 ms/frame	1.07 ms/frame

At the clips' own 20 fps that is 90–108 ms of decode per second of playback
for a 960px clip — a tenth of a core, per clip, on a fast desktop. At 480px,
16–22 ms.

Twelve of them need ~1.1 s of decode per second of wall clock. Nothing plays
correctly under that. The page stayed at 56 fps because the animations, not the
page, absorbed the shortfall — where the metric could not see it.

So:

MP4 is far cheaper to download, rides the video pipeline, and gets expensive in bulk — visibly, in the page's frame rate.
Animated WebP is heavier to download, costs ~10% of a core per master clip to play, and degrades invisibly.
A still beats both wherever nobody is studying the motion.

Whatever you pick, play one clip at a time. That single rule outperforms the
format choice.

Converting: the recipe that actually works

This is where the standard advice fails. The obvious command —

# does NOT work on these clips
ffmpeg -i animation.webp ... output.mp4

— fails on FFmpeg 8.1 with image data not found. FFmpeg only learned to
decode animated WebP in 7.1, and its decoder still chokes on clips whose frames
are stored as blended sub-rectangles rather than full canvases, which is what a
size-optimised encoder produces. Every clip I tried failed the same way.

Extract the frames with libwebp's anim_dump first — it composites each frame
onto the full canvas — then encode the PNG sequence:

CLIP=animation.webp

# 1. frames out (libwebp ships anim_dump alongside cwebp)
mkdir -p frames
anim_dump -folder frames "$CLIP"

# 2. the clip's own rate rather than a guess: frames / total duration
FPS=$(webpinfo -summary "$CLIP" \
  | awk '/Duration/ {n++; ms += $2} END {printf "%.0f", n / (ms / 1000)}')

# 3. composite on the panel colour and encode
ffmpeg -y \
  -framerate "$FPS" -i "frames/dump_%04d.png" \
  -f lavfi -i "color=c=#111827:s=960x960:r=$FPS" \
  -filter_complex "[1:v][0:v]overlay=shortest=1:format=auto,format=yuv420p[v]" \
  -map "[v]" -an \
  -c:v libx264 -crf 23 -preset medium -movflags +faststart \
  output.mp4

Three things that bite:

Frame rate. The colour source dictates the output rate through the overlay, so both -framerate and r= must match the clip. Assume 25 and you ship duplicated frames.
Alpha edges. Check the result on a light and a dark background. Incorrect compositing shows up as a pale fringe around thin objects.
crf. 23 is a safe default; 28 roughly halved the files again with no obvious loss at card size — flat illustration compresses well.

Choosing between them

Requirement	Choice
Asset must sit on light, dark, and brand surfaces	Animated WebP
One fixed background across the product	MP4 derivative
Display with a plain `<img>`	Animated WebP
Play, pause, seek, visibility control	MP4
Several clips visible at once	Neither — stills, one active clip
Bandwidth-critical, single active clip	MP4
A master you can re-theme without a transcode step	Animated WebP

Method

Six clips from the August 2026 build, 1.3–5.1 MB, covering the size range of 442
shipped animations. WebP variants re-encoded at quality 90, method 4,
exact=True, disposal 2. MP4 encoded with FFmpeg 8.1, libx264, crf 23/28,
medium preset. Grid test: Chrome on a desktop, twelve cards at 240 CSS px in
a four-column grid, served over localhost, frame rate sampled over three
seconds via requestAnimationFrame. Localhost removes the network, which is
why the byte column deserves more weight than the load column. Decode cost:
Chrome's ImageDecoder, file already in memory, so it isolates decode from
network and layout.

Reading an animated image's actual on-screen frame rate is not possible from
page JavaScript. Where this post says an animation stutters, that is an
observation; the decode budget is the measurement that explains it.

Try the assets in your own app

RepDB Standard is a good fit when you want smooth exercise animations, transparent backgrounds, and one consistent character without producing an animation library yourself. Use transparent stills in lists, load one motion clip on the detail screen, and generate MP4 derivatives for fixed-background players.

The paid September 4, 2026 snapshot contains 608 exercise records: 496 with motion clips and 112 with static illustrations. Those are current product counts; the 442-clip catalogue described in the benchmark is the earlier August snapshot, and the measurements above have not been rerun. Motion coverage counts exercise records; close variants can share a clip.

Standard costs $499 once, with transparent classic assets, classic + flat stills, JSON/SQLite, workout templates, and embeddings. You host the files and can use them in your own commercial products without required attribution or a runtime API subscription. Third-party branded client deployments require Custom.

There is also a separate 601-exercise Free Tier with flat 512×512 stills and JSON for commercial in-app use with attribution. The animation preview is for evaluation; production use of those clips requires a paid license.

Browse the animation preview →

Standard details & pricing →

The original article has the live figures. If you are choosing a supplier as well as a format, see the exercise animation library comparison for RepDB, Vital Animations, GymVisual, and Movekit.

ExerciseDB vs WorkoutX vs free-exercise-db vs RepDB (2026)

sergei argutin — Sat, 18 Jul 2026 19:17:16 +0000

An exercise dataset supplies more than names and instructions. Its images become part of almost every screen in your fitness app. A large catalogue can still leave you with mismatched artwork, opaque backgrounds, or an API dependency you did not want.

If your priority is smooth exercise animations, transparent backgrounds, and one consistent character, RepDB Standard is the option I would shortlist from these four. ExerciseDB is worth comparing for its larger advertised entry count; WorkoutX for hosted delivery; free-exercise-db for a free collection with gym photography.

I build and sell RepDB. This is a disclosed comparison based on public product information and the samples I inspected, with the tradeoffs spelled out so you can decide for your app.

Compare the product you would actually ship

	ExerciseDB	WorkoutX	free-exercise-db	RepDB
Delivery	Downloadable files	Hosted API	GitHub files	Downloadable files
Visuals	Animated GIFs	Hosted GIFs	Gym photographs	Consistent classic + flat WebP styles
Background in inspected media	Opaque, near-white	Opaque, near-white	Gym surroundings	Transparent classic assets on Standard
Motion	GIF animations	GIF animations via API	None	Standard: 496 exercises with motion clips; 112 use static illustrations
Offline use	Self-host the files	Depends on API terms and caching limits	Local files	Self-host or bundle the files
Price	$199 Starter / $599 Pro, once	Free plan; $9.99–24.99/month paid plans	Free	Free snapshot; $299 Starter / $499 Standard, once

Prices and advertised delivery formats checked September 8, 2026. Competitor image observations refer to the July 2026 samples, not every asset in their paid catalogues. Sources are listed at the end.

Look at the artwork before choosing the schema

The visual decision is easier to make with examples:

ExerciseDB / the WorkoutX sample: an illustrated figure on an opaque near-white panel.
free-exercise-db: real gym photography with varying framing, backgrounds, and dimensions.
RepDB classic: one consistent character, with transparent assets on Standard.
RepDB flat: a consistent illustrated style, also available in the free snapshot.

For a light card, an opaque panel may be fine. On dark mode, a gradient, or a circular container, the panel becomes part of your design whether you want it or not. Transparent media lets your UI choose the background.

Still frames cannot show animation quality. Watch the movement, character, and background together in the RepDB animation preview. The original comparison has a live motion example; DEV's image proxy does not reliably preserve that transparent animated WebP.

Where each dataset fits

ExerciseDB: a larger advertised catalogue

ExerciseDB lists 1,394 entries. Starter provides self-hosted data and 180px/360px GIFs for $199; Pro adds 720px/1080px GIFs, taxonomy, and relationships for $599. Those are raw entry counts; I have not deduplicated the catalogue.

It is worth shortlisting if coverage breadth and a one-time file download are your priorities. Check the actual exercises you need and whether the opaque GIF style fits your product.

WorkoutX: a hosted exercise API

WorkoutX supplies exercise metadata and GIFs through an API. Its free plan lists 500 requests per month; paid monthly plans range from $9.99 to $24.99.

It fits developers who prefer hosted delivery to managing a local bundle. Check request quotas and caching terms against your expected traffic and offline requirements.

free-exercise-db: a free start with real photographs

free-exercise-db is easy to clone and useful for prototypes that suit gym photography. The code and JSON are published under the Unlicense. For commercial use, review the photographs' provenance as well as the repository license.

The UI tradeoff is visible in the examples: framing, backgrounds, and image dimensions vary. Choose it if the free starting point and photography suit your app.

RepDB Standard: a consistent animated exercise library

RepDB Standard is built for fitness apps that need smooth looping animations, transparent backgrounds, and one consistent character. You can use the same classic assets across light mode, dark mode, and brand surfaces, then host them yourself or bundle them for offline use.

The September 4, 2026 paid snapshot contains 608 exercise records: 496 with motion clips and 112 with static illustrations. Standard costs $499 once and includes classic + flat stills, transparent classic assets, JSON/SQLite, exercise relations, workout templates, and embeddings. Instructions in EN/DE/ES are also included.

Starter is $299 for the same paid exercise list with classic + flat stills and JSON. Animations and transparent classic assets are Standard features. Both paid tiers cover commercial use in your own products without required attribution; client deployments under another company's brand require Custom.

The practical reason to pay for Standard is the visual system: your exercise screens keep the same character and style while your app controls the surface. Inspect the movements that matter to your product before choosing a library.

Browse the animation preview →

Standard details & pricing →

Can I start with RepDB for free?

Yes. The separate 601-exercise public snapshot has JSON, flat 512×512 WebP images, instructions, muscles, equipment, MET values, goals, and tags. It permits commercial in-app use with visible attribution. It can lag behind the paid catalogue and does not include a production license for the animation samples.

Browse the free viewer or download the GitHub dataset. Free fits apps that need still illustrations; Standard is the upgrade when you need transparent animations and the consistent classic character.

My recommendation by use case

A fitness app with animated demonstrations, dark mode, and a consistent character: evaluate RepDB Standard.
A larger advertised entry count with self-hosted GIFs: compare ExerciseDB's coverage with your exercise list.
A hosted API instead of local files: evaluate WorkoutX's quotas and delivery terms.
A free prototype built around gym photographs: consider free-exercise-db.
A free app using consistent flat illustrations: start with RepDB Free Tier.

If you are also considering Vital Animations, GymVisual, or Movekit, I compared their visual approaches and public previews in this exercise animation library comparison.

Sources and scope

Public pricing and delivery information checked September 8, 2026:

ExerciseDB: exercisedb.io/pricing and exercisedb.io/terms.
WorkoutX: workoutxapp.com and workoutxapp.com/terms.html.
free-exercise-db: github.com/yuhonas/free-exercise-db.
RepDB: pricing, license, and the September 4 shipping snapshot.

File-level competitor observations date to July 2026. RepDB's motion count refers to exercise records, not necessarily unique clips; close variants can share an animation. The public Free count was checked September 8. I build and sell RepDB; third-party names and sample imagery are used for identification and comparison.

Free exercise dataset for fitness apps: JSON + images, with a path to animations

sergei argutin — Mon, 29 Jun 2026 14:43:40 +0000

Building an exercise search, workout planner, or fitness app? RepDB Free Tier gives you 601 exercises with JSON metadata and flat 512×512 WebP images, ready to use inside a commercial app with attribution. There is no account, API key, or monthly request quota.

When the app needs animated demonstrations, RepDB Standard adds smooth looping animations with transparent backgrounds and one consistent character. That is the upgrade: exercise media that fits your product's design, alongside the data you already need.

I build and sell RepDB. Here is what you can use for free, how to load it, and when Standard makes sense.

Start with the free dataset

601 exercise records: names, target muscles, equipment, categories, MET values, goals, and tags.
Flat illustrations at 512×512: WebP start/peak poses, or one image where appropriate.
Instructions in English, German, and Spanish.
Files you can host yourself: bundle the JSON and images with your app or serve them from your own infrastructure.

Browse the free exercise viewer or get the files on GitHub.

const response = await fetch("https://exercise-dataset.com/exercises.json");
if (!response.ok) throw new Error(`Dataset request failed: ${response.status}`);
const dataset = await response.json();

console.log(dataset.count); // The downloaded snapshot's own count.
console.log(dataset.exercises[0].images.flat);

Use that to inspect the data, then keep your own copy for production and offline access. Next.js, React Native, and Flutter examples show how to build an exercise browser around the files.

The Free Tier License allows personal and commercial in-app use with a visible RepDB credit. It does not allow republishing the data as a dataset or API. Paid animation samples in premium-samples/ are evaluation-only; the free commercial-use permission does not cover those clips.

When to choose RepDB Standard

Choose Standard when the exercise screen needs to look like part of your app:

Transparent backgrounds: put the same classic asset on light cards, dark mode, or brand gradients.
Smooth looping animations: let users watch the movement on the exercise detail screen.
One consistent character: keep a coherent visual identity across the animation library.

Browse the animation preview →

	Free	Starter	Standard
Price	Free with attribution	$299 once	$499 once
Exercise records	601 public snapshot	608	608
Stills	Flat, 512×512	Classic + flat, 1024×1024	Classic + flat, 1024×1024
Transparent classic assets	No	No	Yes
Motion coverage	Evaluation samples only	No	496 exercises with motion clips; 112 use static illustrations
Commercial use in your own app	With attribution	Without required attribution	Without required attribution

Standard also includes JSON/SQLite, exercise relations, workout templates, and embeddings for search. You host the files and keep using the version you buy; there is no runtime API subscription. Third-party branded client deployments require Custom.

Free is a separate public snapshot, so its exercise count can lag behind the paid bundle. Counts above were checked September 8, 2026; paid coverage is from the September 4 shipping snapshot. Motion coverage counts exercise records; close variants can share a clip.

If still illustrations fit your app, start with Free. If transparent animations and a consistent character are part of the product you want to ship, evaluate Standard's real files in your UI before buying.

Standard details & pricing →