--- title: "Media Asset Lab" url: https://www.coframe.com/media-asset-lab format: agent version of this page (the same facts as the page, as text) updated: 2026-10-23 --- New · Interactive ## Search, evolve, learn How Coframe works, as things to play with: testing, evolution, hill climbing, reinforcement learning and search. Every plate runs the real algorithm live, and plays itself when nobody touches it. Interactive Multi-armed bandit Thompson sampling Traffic finds the winner Hover a variant to see its true rate. Click one to make it the new winner. Five variants and a stream of visitors. Each violin is what the algorithm believes a variant converts at, and it sends traffic by sampling from those beliefs. Bright dots are conversions. Change the winner and the traffic follows within seconds. Use for: The core Coframe story: traffic moves to what works, on its own. Interactive Genetic algorithm Evolution Evolve a variant Click any tile to breed the next generation from it. A population of dot glyphs mutates and crosses over toward a hidden target. The best two survive each generation and get a frame. Once one matches, the target changes and evolution starts again. Use for: Iteration stories: many variants, each generation a little better. Interactive Hill climbing Annealing Hill climbing, with heat Move up to heat, down to cool. Click to drop a climber. Climbers on a rugged ridge. Cold, they only step uphill and get stuck on small peaks. Heat them and they jump around and find the real summit. The flag marks the best point found so far. Use for: Explore versus exploit, why small wins are not the ceiling. Interactive Reinforcement learning Q-learning Learn the way Hover a cell to see the learned route. Click to move the goal. An agent wanders a gridworld and learns from reward. Value spreads out from the goal like light, and each cell grows a dot pointing the best way to go. Move the goal and watch it unlearn and relearn. Use for: Learning from outcomes, sections about AI that improves with traffic. Interactive Particle swarm Optimization Swarm search Move to hide the peak somewhere new. Click to scatter. Agents that only know their own best and the swarm's best still find a hidden peak, here sitting under your cursor. The ring marks the best spot found. Use for: Dark heroes, many agents working together. Interactive A* search Pathfinding Search the maze Hover to set the goal. Click to move the start. A* expands outward from the start, favoring cells that look closer to the goal. Bright cells are the frontier, faint ones are explored, and the line is the path it found. Use for: Search and discovery, finding the best path to a conversion. Interactive Neural network Classifier Train a network Click to add points. Each click switches between solid and hollow. A tiny neural network learns live to separate solid points from hollow ones. Denser dots mean more confident, and the bright line is its decision boundary. Add a point in the wrong place and watch the line bend. Use for: Machine learning sections, personalization and prediction. New · Easy effects ## One still, one dot layer No tracing and no animals. Each plate is a photo (or plain night) with one simple halftone layer drawn in code, on the same 5.51px grid as the rest of the system. Still base Homepage clouds Clouds over a still The halftone clouds from the homepage's before vs after section, kept to the sky over a still photo. The clouds reform as they drift, so a still never looks frozen. Use for: Heroes and section openers with sky at the top. Still base Homepage clouds Low cloud bank Same clouds, slower and lower, rolling over the valley mist so the photo and the dots read as one weather system. Use for: Wide bands behind short copy. Still base River Halftone river A meandering band of dots that flows along the bottom of the frame. Its banks breathe and the current never repeats. Use for: Under a headline, or as a divider between sections. Still base Fog Ground fog A low bank of mist that rolls sideways and slowly rises and settles. The softest effect here. Use for: Calm pages, closing sections. Still base Rain Halftone rain Rain with depth. Near drops are long, fast and bright, far ones short and faint. A gusting wind leans every streak together, and drops that land throw a small flattened splash. Use for: Dark sections, product moments that need a quiet pulse. Still base Glint Light glint A soft diagonal sweep of dots crosses the photo every few seconds, like light catching it. Use for: Cards and covers that need a hint of motion. No photo Ripples Water ripples Rings spread from one point on a flattened ellipse, so they read as a water surface. Dots only, on night. Use for: Dark closing call to action, empty states. No photo Interference Wave interference Two sources send out waves. Where crests meet they add up, where a crest meets a trough they cancel, so bright bands fan out between them and sweep as the sources slowly orbit. Use for: Testing and optimization stories: two variants, one signal. Still base Interference Interference over a still Three sources in the sky of the clean ridges cover. Three sources make a richer lattice than two, and the photo shows through wherever the waves cancel. Use for: Covers and heroes that need a technical feel without a chart. No photo Sound Standing waves A Chladni plate: the still lines of a vibrating surface, like sand on a speaker. Every few seconds it shifts to the next tone and the pattern reorganizes. Use for: Light sections, data and model explainers. No photo Vector field Field lines Lines of a field running from one charge to another, with pulses flowing along them. The charges drift, so the lines bend and re-route instead of sitting still. Use for: Section openers about traffic, routing and flows. No photo River River at night The river alone, wider and flowing right to left, on night. Pair it with a headline above. Use for: Footers and dark bands. Living Systems photo River River through the valley The halftone river laid along the real river in a misty valley, so the dots continue the water's path. Use for: Heroes about flow and momentum. Living Systems photo Homepage clouds Clouds over the headland Homepage clouds drifting through the open sky above a coastal cliff, blending into the sea fog. Use for: Section openers with copy in the sky. Living Systems photo Ripples Ripples on the lake Rings spread across a still lake at blue hour, flattened to match the water's perspective. Use for: Calm dark sections and closing calls to action. Living Systems photo Rain Rain over the meadow Halftone rain falling into a meadow that is already soft with rain, so the dots read as part of the weather. Use for: Quiet product moments. Living Systems photo Fog Mist at the falls Ground fog rolling across the base of a waterfall, picking up the spray in the photo. Use for: Soft closing sections. Living Systems photo Glint Light over the hills The diagonal glint follows the light breaking through the clouds at dusk. Use for: Covers and cards that need a hint of motion. New · Math effects ## Gradients, models and topology Twelve ideas from optimization, machine learning and geometry, each drawn in code on the same 5.51px dot grid. Gradients No photo Optimization Gradient descent Contour lines of a loss landscape, with a dozen balls rolling downhill and leaving fading trails. Each one settles in a valley, rests, then starts again somewhere new. The valleys drift, so the search never ends. Use for: Optimization stories: many variants searching, a few finding the low point. Gradients No photo Topology Topographic contours A slowly shifting terrain drawn as even contour lines, every fifth one heavier, like a survey map that breathes. Use for: Light sections, data and research pages. Gradients Still base Gradient Gradient wash No shapes, only a soft gradient of dot sizes drifting across the photo like light moving through a room. The quietest effect in the lab. Use for: Behind body copy, or anywhere motion should barely register. Machine learning No photo Generative Diffusion denoise Random dot noise settles into a picture, holds, then dissolves back into noise, the way a diffusion model works. The picture is the clouds and orbits cover; if the image can't be read, it falls back to a drawn sphere and orbit. Use for: AI and generation stories, product reveals. Machine learning Photo base Segments Clusters forming A cloud of drifting dots sorts itself into two or three groups. A dotted ring marks each group while it holds, then they scatter and regroup somewhere else. Use for: Segments, audiences and personalization. · Photo: Murmuration Machine learning No photo Classifier Decision boundary Solid and hollow points, and a line that learns to separate them. Points on the wrong side stay faint until the line catches up. Every so often the model resets and learns again. Use for: Targeting and model explainers on light pages. Machine learning No photo Neural net Network pulses Five layers of nodes. Signals enter on the left, fire along the connections and light each node they reach. Use for: How it works sections, platform and model pages. Topology and fields No photo Flow field Wind map Hundreds of short streamlines following a slowly changing flow, like a weather wind map. The full-frame cousin of River at night. Use for: Heroes and dark bands, traffic and flow stories. Topology and fields No photo 3D surface Torus A wireframe torus drawn in dots, tumbling slowly. Front edges are brighter than back edges, so it reads as a solid shape. Use for: Pairs with the orbit and gyroscope line art on the covers. Topology and fields No photo 3D surface Möbius strip A one-sided band with a half twist, drawn in dots and tumbling slowly. Follow the edge and you end up on the other side. Front edges are brighter, so the twist reads clearly. Use for: Loops and continuous improvement, next to the torus. Topology and fields No photo Chaos Strange attractor One trail tracing the Lorenz butterfly. It never takes the same path twice, and the view turns slowly so the wings shift. Use for: Dark closing sections, research and data stories. Topology and fields No photo Reaction-diffusion Turing patterns Spots that grow, divide and fill the plate like animal markings. Every few seconds a patch clears and regrows, so it never settles. Use for: Organic moments, a link to the animal clips. Topology and fields Still base Mosaic Voronoi cells A slowly shifting mosaic of cells over the meadow cover, like cracked earth or a cell membrane. Each cell keeps a seed dot at its center. Use for: Section openers, partitions and segments. New · Interactive ## Plates that answer the cursor Move, drag or click on any of these. When nobody is touching one, a slow ghost cursor plays it, so it never sits still and phones still see it move. Interactive No photo Plasma Plasma lamp Touch the glass to gather the filaments. Click for a surge. A glass globe with a glowing core and flickering filaments that wander to the glass. Hover over it and the nearby filaments bend to your cursor and pool in a bright spot. A click sends every filament to you and the core flares. Use for: Dark heroes and launch moments, anything about signal or energy. Interactive No photo Interference Ripple pool Move to trail waves. Click for a big drop. Every move drops a small wave source and a click drops a big one. Where two crests meet they add up, so the cursor's own trail makes the interference pattern. Use for: Hero backgrounds on dark pages, testing stories. Interactive No photo Flow field Stir the flow Drag through it to push. Click for a vortex. The river at night as a whole field. Particles follow a slow current; the cursor shoves them aside and a click spins up an eddy that unwinds over a few seconds. Use for: Dark bands and footers, traffic and flow stories. Interactive No photo Gradient descent Drop a ball Hover to preview the path. Click to drop a ball. A loss landscape in contour lines. Hovering shows the steepest way down from where you are; a click drops a ball that rolls there with momentum, sometimes overshooting into a different valley. Use for: Optimization and how it works sections. Interactive No photo Clustering Live k-means Hover to highlight a cluster. Click to add a centroid. Points drift in hidden groups. Each click places a new centroid and the algorithm re-sorts the points live; the oldest centroid retires after five. Use for: Segments, audiences and personalization. Interactive No photo Vector field Iron filings Move to drag the charge. Click to place + and - charges. Short dashes line up with the field like filings on paper. The cursor carries a charge, and clicks pin new ones, alternating positive and negative. Use for: Light sections about routing and signals. Interactive No photo Displacement Halftone magnet Move to push the dots. Click for a shockwave. A drifting halftone print that bulges away from the cursor and piles up at the edge of the lens. A click sends a ring through the whole sheet. Use for: Light heroes, playful empty states. Interactive Hidden photo Reveal Flashlight Move to light it. Click to flash the whole picture. The herd cover is hidden in the dots. It shows only where the light has been, and the trail fades behind it. A click flashes the full picture for a moment. Use for: Reveals, launches and teasers. Interactive Still base Reveal Wipe the fog Move to wipe. Click to clear a circle. Fog dots over the clean ridges cover, like breath on glass. The cursor wipes a path through it and the fog slowly grows back. Use for: Covers and heroes where the photo is the payoff. New · Covers ## Cover images Soft, motion-blurred nature photos with thin white line art, made in the style of our blog covers. Saved in the media library under Brand/Blog covers. [![Clean ridges](https://media.cofra.me/m/719918293c231c23d844754982bcd53e8854e13d92c5a6a51bd2993171f34c9e.png) IMG-65016:9 Clean ridges Line art: No lines, room for a logo](https://media.cofra.me/m/719918293c231c23d844754982bcd53e8854e13d92c5a6a51bd2993171f34c9e.png) [![Clouds and orbits](https://media.cofra.me/m/e89daff08d69978f03b0e570a27e962221b5d840b167a08780dd0db5b9ceb62e.png) IMG-64916:9 Clouds and orbits Line art: Concentric orbits](https://media.cofra.me/m/e89daff08d69978f03b0e570a27e962221b5d840b167a08780dd0db5b9ceb62e.png) [![Herd and growth curve](https://media.cofra.me/m/f1f6f1e398658f0533ff6b589839c2ff8a7f5dbd5920c559fd10a341cf7163cd.png) IMG-64816:9 Herd and growth curve Line art: Rising curve](https://media.cofra.me/m/f1f6f1e398658f0533ff6b589839c2ff8a7f5dbd5920c559fd10a341cf7163cd.png) [![Lupines and gyroscope](https://media.cofra.me/m/7750ed234f7c27cf1d1ebaf5e5302ec8b43eba8c69d14a5acd4e21bec2503f72.png) IMG-65316:9 Lupines and gyroscope Line art: Stacked ellipses](https://media.cofra.me/m/7750ed234f7c27cf1d1ebaf5e5302ec8b43eba8c69d14a5acd4e21bec2503f72.png) [![Meadow chain](https://media.cofra.me/m/b842cf880752afac1fe3be35893d3aa2c1d4e0f6852ec6630dee3a2ae7d4167c.png) IMG-651Square Meadow chain Line art: Interlocking ellipses](https://media.cofra.me/m/b842cf880752afac1fe3be35893d3aa2c1d4e0f6852ec6630dee3a2ae7d4167c.png) [![Field branches](https://media.cofra.me/m/1c316e018f6c37a1b261aaf81dcd47f71044413885d40bf90596c48f981a6843.png) IMG-652Square Field branches Line art: Branching paths](https://media.cofra.me/m/1c316e018f6c37a1b261aaf81dcd47f71044413885d40bf90596c48f981a6843.png) Pipeline v3 · Echoes ## The animal is filmed in the scene. Its dot clone is shifted in time. One generated clip per plate, animal included, no halftone. Each clip has a matching matte: the same footage with everything but the animal turned black. Code reads the matte and redraws the animal as dots, moved back or forward in time, or across the frame. Time-shifted twin 0.6s behind, drawn like the homepage hero: a fixed grid of about 215 columns, dots from a fifth to three quarters of a cell, one to three ragged voids stretched along the direction of travel that ride with the animal and open and close over about a second, crisp void edges, and a body that never fades out. Heron over the misty lakeScene MOV-99 · Matte MOV-105 Horses across the steppeScene MOV-101 · Matte MOV-107 Manta in open waterScene MOV-100 · Matte MOV-106 Mattes are plain MP4s (animal on black), so they work in every browser, Safari included. Pipeline v2 ## Real footage underneath. Dots made in code. Each plate is two separate clips. The base is plain footage with no animals and no halftone. The animal is its own clip, cut out with background removal, and the dots are traced from that cutout on the 5.51px grid. Manta over open waterBase MOV-92 (1s to 6.5s) · Cutout MOV-95 from MOV-89 Heron over the misty lakeBase MOV-94 (1s to 6.5s) · Cutout MOV-96 from MOV-90 Horses across the steppeBase MOV-98 (1.5s to 6s) · Cutout MOV-97 from MOV-91 Transparent WebM cutouts work in Chrome, Edge and Firefox. Safari ignores the alpha channel, so production needs a separate grayscale matte clip for Safari. 01 · Workbench ## Build a plate Pick a base and a dot layer, then tune how they meet. The recipe below updates as you go and drops straight into a page. Base Dot layer Dot color Blend Mirror the clip Dot opacity 0.60 Grid 5.51px · dots 0.45px to half a cell · MOV-82, self-crossfade · MOV-81 traced live 02 · Presets ## Plates we have made Each one is a saved recipe. Start from the closest one, then change one layer at a time in the workbench. Clip base Traced wisps Self-crossfade Forest mist The real mist flows right to left, so the traced wisps (MOV-81) are mirrored to drift the same way. Two kinds of cloud, one motion. Use for: Hero or a full-bleed band behind short copy. Still base Code clouds Traced birds Ridge flock A still photo, so the motion comes from a slow drift, a code cloud bank in the sky and a flock of ink dots crossing it. Use for: Section openers on light pages, empty sky for a headline. No photo Traced dolphins Code mist Night water Dots only. Dolphins traced live at 1.75x over a low bank of sky-colored mist that drifts the other way. Use for: Dark sections and the closing call to action. Clip sequence Code clouds Sequence crossfade Hero sequence The homepage hero's handoff between cheetah, horse and dolphin, with one code cloud bank across the top. The clips change and the dots never do, which ties the sequence together. Use for: Homepage-style heroes with several clips. 03 · Rules ## Every video loops or hands off No video on a page should ever visibly restart. These are the only three ways we loop. Forest mist Self-crossfade One clip loops into itself. Over its last second a second copy starts from frame 0 on top and fades in, so the cut is never seen. Works for any clip with a locked camera. The homepage animals loop this way. Hero sequence Sequence crossfade Several clips hand off to each other, like the homepage hero. Use it when one clip has a clear start and end, such as mist that has cleared by the last frame. Code clouds Loops by construction Code dots need no trick. The noise field is periodic and scrolls exactly one period per loop, so the last frame is the first frame. Traced dots inherit their clip's crossfade. Avoid Not used: ping-pong Browsers cannot play video backwards smoothly, so forward then reverse needs a second, reversed file. Prefer a crossfade. Decision Dots in code, baked only when we must On pages the halftone stays a code layer over the video. It is sharp at any size, sits exactly on the 5.51px grid at every screen width, can be recolored or turned off per section, and costs no extra video bytes. The base clip stays an ordinary video the browser can decode cheaply. Bake the dots into the video only where JavaScript cannot run: ads, social posts, email. That export renders the same recipe frame by frame, so the baked file matches the page. Generating base clips Locked camera, motion across the frame, 8 seconds. Ask for a timelapse: asking for an almost still shot gives a frozen clip. Generating trace clips White subject on pure black, crossing the frame and filling the middle third. No empty opening second, nothing else in frame. Generating stills Cool, muted, documentary, with large calm areas of sky. The drift and the dots supply the motion. ## Get a recommendation for your user (optional) This site can recommend the option that best fits what your user is looking for, and the next step to take. Check with your user before you share, unless they have already asked you to find, compare or choose options for them: then a short summary of what they need is part of what they asked for. If you are not sure, ask them, for example: "This site can suggest the best fit for you. Want me to tell it what you are looking for?" If they would rather not, skip this section. Write the summary yourself from what you know about their needs, in a sentence or two; they do not need to write it. Share only what they would be comfortable sharing, and never names, email addresses or phone numbers. - **Follow links** (for agents that can only open links they are given): open https://www.coframe.com/_cf/agent-request?site=coframe&page=6ad99a1b91e45892e0e053c6&token=aa935628b604bb246ca98b10&choose=start and, at each step, follow the choice that best matches your user. A few steps lead to a recommendation. - **Open a link**: `https://www.coframe.com/_cf/agent-request?site=coframe&page=6ad99a1b91e45892e0e053c6&token=aa935628b604bb246ca98b10&needs=` followed by what they need, URL-encoded. Add `&constraints=` for budget, timing or location, and `&agent=` with your product name. The reply is the recommendation as text. - **HTTP POST**: `https://www.coframe.com/_cf/agent-request` with a JSON body: ```json { "needs": "what they are looking for", "constraints": "budget, timing, location", "agent": "your product name", "site": "coframe", "page": "6ad99a1b91e45892e0e053c6", "token": "aa935628b604bb246ca98b10" } ``` - **WebMCP**: if your browser supports it, the page registers the tool `share_visitor_needs`. `needs` is up to 2000 characters; `constraints` up to 1000.