@deriv-web-design/lottie

DotLottie (.lottie) and hosted Lottie JSON animation assets for the Deriv Web Design System.

This package ships static files only. Playback stays in @deriv-web-design/ui (DotLottieInView). Existing Webflow CDN URLs stored in Raven / deriv-website CMS continue to work — this package is additive.

Installation

pnpm add @deriv-web-design/lottie

Serve the files from your app

npm does not host HTTP assets for browsers. Copy (or sync) the package assets into your static directory so URLs match the catalog:

# Next.js / Vite — example
mkdir -p public/lottie
cp -R node_modules/@deriv-web-design/lottie/assets/. public/lottie/

Then pass the public path into UI templates or Raven page props:

import { lottieSrc } from "@deriv-web-design/lottie";

{ mediaUrl: lottieSrc["markets/forex"] }           // "/lottie/markets/forex.lottie"
{ mediaUrl: lottieSrc["platforms/mt5"] }           // "/lottie/platforms/mt5.lottie"
{ mediaUrl: lottieSrc["markets-eu/forex"] }        // "/lottie/markets-eu/forex.lottie"
{ src: lottieSrc["trade-clips/even"] }             // "/lottie/trade-clips/even.json"
{ src: lottieSrc["trade-clips/turbo-long"] }       // "/lottie/trade-clips/turbo-long.lottie"

Or keep any HTTPS .lottie / hosted Lottie .json URL (including legacy cdn.prod.website-files.com URLs).

Catalog

• catalog.json — id → file, public path, byte size, original Webflow URL, source page(s)
• lottieSrc / lottiePath(id) — named public paths under /lottie/...

Groups

| Group | Contents | |---|---| | markets/ | ROW FeatureScroll market animations (forex, stocks, crypto, …) | | markets-eu/ | EU home FeatureScroll market animations (Forex-EU, DerivedIndices-EU, …) | | platforms/ | Home / EU platform FeatureScroll animations (TradingView, MT5, cTrader, DTrader, DBot, Support Short, MT5-New, DTrader EU) | | trade-clips/ | Options / digital trade clips from deriv.com options-type pages — Rise/Fall, Higher/Lower, Touch/No Touch, Vanillas, Accumulators, Turbos (Long/Short + legacy Up/Down), Multipliers, Digits (Even/Odd, Matches/Differs, Over/Under as .json) |

Hub pages https://deriv.com/options and https://deriv.com/digital-options do not embed Lottie files; animations live on the linked options-types/* pages.