{ "slug": "market-ticker", "title": "Market ticker strip", "tagline": "Seamless scrolling ticker of symbols with logo, price and change — stocks, crypto or anything with a number. 1920×160 strip, 10 s loop.", "description": "Free CC0 market ticker motion template: scrolling strip with logos from gimgs.net (stock, crypto, brand), price and coloured change. Self-contained HTML, loops seamlessly, agent-friendly.", "category": "ticker", "tags": [ "ticker", "stocks", "crypto", "finance", "loop" ], "tier": "free", "license": "CC0", "spec": { "width": 1920, "height": 160, "fps": 30, "duration": 10, "aspect": "12:1" }, "kind": "html", "params_schema": { "type": "object", "properties": { "items": { "type": "array", "description": "Ticker items in order. Each: {symbol, name, price, change, logo}. change starting with '-' is red. logo: https://gimgs.net/stock/{tradingview-slug}.svg, /crypto/{ticker}.svg or /brand-logo/{slug}.svg", "default": [ { "symbol": "BTC", "name": "Bitcoin", "price": "$112,430", "change": "+2.4%", "logo": "https://gimgs.net/crypto/btc.svg" }, { "symbol": "ETH", "name": "Ethereum", "price": "$4,120", "change": "-0.8%", "logo": "https://gimgs.net/crypto/eth.svg" }, { "symbol": "AAPL", "name": "Apple", "price": "$248.10", "change": "+1.1%", "logo": "https://gimgs.net/stock/apple.svg" }, { "symbol": "NVDA", "name": "NVIDIA", "price": "$181.20", "change": "+3.6%", "logo": "https://gimgs.net/stock/nvidia.svg" }, { "symbol": "TSLA", "name": "Tesla", "price": "$412.00", "change": "-1.9%", "logo": "https://gimgs.net/stock/tesla.svg" } ] }, "bg": { "type": "string", "format": "color", "default": "#0b0c10", "description": "Strip background" }, "up": { "type": "string", "format": "color", "default": "#22c55e", "description": "Positive change colour" }, "down": { "type": "string", "format": "color", "default": "#ef4444", "description": "Negative change colour" } } }, "default_params": { "items": [ { "symbol": "BTC", "name": "Bitcoin", "price": "$112,430", "change": "+2.4%", "logo": "https://gimgs.net/crypto/btc.svg" }, { "symbol": "ETH", "name": "Ethereum", "price": "$4,120", "change": "-0.8%", "logo": "https://gimgs.net/crypto/eth.svg" }, { "symbol": "AAPL", "name": "Apple", "price": "$248.10", "change": "+1.1%", "logo": "https://gimgs.net/stock/apple.svg" }, { "symbol": "NVDA", "name": "NVIDIA", "price": "$181.20", "change": "+3.6%", "logo": "https://gimgs.net/stock/nvidia.svg" }, { "symbol": "TSLA", "name": "Tesla", "price": "$412.00", "change": "-1.9%", "logo": "https://gimgs.net/stock/tesla.svg" } ], "bg": "#0b0c10", "up": "#22c55e", "down": "#ef4444" }, "preview": { "poster": "https://gimgs.net/motion/media/market-ticker/poster-030da6fd1bc9.jpg", "video": "" }, "variants": [], "credits": { "author": "gimgs", "url": "https://gimgs.net/motion" }, "page_url": "https://gimgs.net/motion/market-ticker.html", "json_url": "https://gimgs.net/motion/market-ticker.json", "template_url": "https://gimgs.net/motion/market-ticker/template.html", "play_url": "https://gimgs.net/motion/market-ticker/play", "markdown_url": "https://gimgs.net/motion/market-ticker.md", "updated_at": "2026-09-24T07:24:43.566Z", "prompt": "## When to use\nA finance/news strip at the bottom of a video, a looping background for a market update, a dashboard header. The output is a 1920×160 strip: overlay it on 1080p footage with ffmpeg `overlay=0:920`.\n\n## How to adapt\n- Fill `items` with real data — prices and changes are plain strings so format them however the audience expects (`€1.234,56`, `+0.8 %`, `▲ 2.4%`). Anything whose `change` starts with `-` is coloured `down`.\n- Logos: stock → `https://gimgs.net/stock/{tradingview slug}.svg` (apple, microsoft, nvidia…; use `/api/stock-search?q=` to find the slug), crypto → `/crypto/{ticker}.svg`, brands → `/brand-logo/{slug}.svg`. Omit `logo` to hide the circle.\n- 5–8 items fill the width nicely; the list is duplicated internally so the loop is seamless at any count.\n- Speed: the rail travels half its width in `duration` (10 s). More items = faster. Change `window.motion.duration` in the source for a slower loop.\n\n## Do not change\n`window.motion`, `#stage` size, the rail's `translateX(-50%)` loop (that is what makes frame 0 and the last frame line up).", "flow": [ { "step": "Collect quotes", "tool": "any market data API", "note": "Format numbers as strings." }, { "step": "Resolve logos", "tool": "gimgs /api/stock-search?q=apple → logoid", "note": "→ https://gimgs.net/stock/{logoid}.svg" }, { "step": "Render loop", "cmd": "frames 0…299 at t=i/30 → ffmpeg -framerate 30 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p ticker.mp4" }, { "step": "Overlay", "cmd": "ffmpeg -i video.mp4 -stream_loop -1 -i ticker.mp4 -filter_complex \"[1]format=yuva420p[t];[0][t]overlay=0:920:shortest=1\" out.mp4" } ], "files": [], "contract": "Self-contained HTML. Declares window.motion = { width, height, fps, duration, params, apply(params) [, seek(t)] }; root element #stage sized width×height; animations are CSS/WAAPI with animation-fill-mode: both so any t can be seeked via document.getAnimations(). The host runtime (injected by /play) merges ?p params, calls apply(), scales #stage to the viewport and, when ?t is given, pauses and seeks deterministically.", "render": { "frames": 300, "frame_url": "https://gimgs.net/motion/market-ticker/play?p=&t=", "note": "Open frame_url in a headless browser with viewport width×height (deviceScaleFactor 1), wait for document.documentElement.dataset.motionReady === '1', screenshot; repeat for t = i/fps (i = 0…frames-1); then `ffmpeg -framerate -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4`. Or drop ?t to play it live." }, "source": "\n\n\n\nMarket ticker strip\n\n\n\n
\n
\n
\n
\n\n\n\n" }