Madreselva · brand · hero motion
Three ways to replace the static UV hero with motion that states the thesis rather than decorating it. Every option ends on the true photograph — the resting frame is always the real asset, never a model's approximation of it.
An adaptive quadtree analyses the photograph once and spends its subdivision budget where there is signal. The void stays one block; the flower splits eight times. Scroll drives the resolution ladder, each doubling arriving as a wavefront, and the last rung cross-fades to the real photograph. Move the pointer across the frame: it resolves two levels deeper wherever you look.
Honest read. This is the option that actually says something. The subdivision is not decorative — it is visibly an allocation decision, and the decision it makes is to ignore the empty field and pour resolution into the flower. That is the company's sentence rendered as a mechanism. In motion it reads as a machine deciding, then committing. Its weakness is the first two seconds of the full range: at levels 0–2 the frame is a handful of large grey-green rectangles, which is severe and, held on its own, looks like a broken image. The scrubber above starts at 0 so you can see that; production does not. The drop-in floors the ladder at 0.18 and animates a load-in settle to 0.46, which is the state the in-situ section below opens on — a coarse but composed mosaic, screenshot-safe. The wavefront per doubling is deliberately soft; in the pure black region the two levels are near-identical, so the sweep is only legible across the flower — correct, but it means the "pass" reading is quieter than a hard scan-line would be. The pointer lens is the strongest single beat and the one thing a visitor will try twice.
The literal reading of the brief, built properly. Every lit cell of the photograph becomes a pixel that starts as scattered static, drifts through a flow field on a serpentine write order, and locks into its true coordinate with a flare. Noise resolving into signal — which is also what a diffusion model does. The pointer shoves the lattice and it springs back.
Honest read. The mid-flight state, around 40–55%, is the most beautiful frame anything here produces: a cold cloud of static holding the ghost of the flower. It is also the most conventional idea in the set — particle-assembly heroes exist in quantity, and a visitor who has seen one has seen this. The write-order sweep and the pointer disturbance are what lift it above the genre, and the disturbance is genuinely satisfying: the lattice takes the hit and re-forms. Two real weaknesses. First, the settled state before the photo cross-fade is a 4-pixel mosaic that is very close to option A's deepest level, so the two options converge at the end and B has spent more machinery to arrive at the same place. Second, additive compositing over a trail buffer means exposure has to be actively managed as the field locks; it is corrected here, but it is a fragile part of the design and a future edit to trail will blow the highlights out again.
The same idea handed to a video model. The start frame is not a prompt — it is a quadtree mosaic computed from the real hero file, so the model is interpolating between two true states of the same asset: blocks in, photograph out. All four takes anchor hero-uv.png as the end frame; the two shown are the best of them.
Honest read. This did not work, and the failure is structural. Four takes across three models, all anchored start-to-end on real files. Every one of them completes the entire pixel-to-photograph transition inside the first 0.6–1.4 seconds and then holds a nearly static photograph for the remaining three-and-a-half to four-and-a-half seconds. A second pass with explicit pacing language — coarse blocks for two seconds, full sharpness only in the last half second — made Kling faster, not slower. Image-to-video models treat two anchors as an interpolation to be dispatched, not a duration to be filled, and no amount of prompt does anything about it. The second finding is that the end-frame anchor is honoured very unevenly: Kling lands within MAE 0.89 of the real file, which is genuinely faithful, while Seedance 2.5 re-renders the flower with added bloom and drifts to MAE 47 over the lit area — a fair-looking image that is no longer the asset. Beyond that, a video cannot be bound to the pin, cannot answer a pointer, and ships megabytes where the code option ships kilobytes. The best of these clips is a pleasant three-second logo sting. It is not a hero.
Option A bound to the real pinned hero — same geometry, same copy beats, same blend mode. The resolution ladder is mapped onto the pin so the photograph reaches full resolution exactly as the thesis line lands. Scroll it.
/maðɾeˈselβa/
From Latin matrisilva. In Spanish, madre, mother, and selva, rainforest.
Honeysuckle. A climbing plant that takes hold of whatever it grows against.
A Dubai-based private holding company backing businesses where biology and computation meet.
Recommendation
A wins on argument, not on polish. B is prettier for two seconds in the middle and A is better for the other twenty — and more importantly A is the only one whose mechanic is an idea rather than an effect. Pixels arriving is a transition; resolution being allocated is a thesis. A also costs less to run, degrades more honestly, and survives a scrubbing user without exposure drift. The generated video is the weakest of the three for this specific brief: it cannot respond to a pointer, cannot be bound to the pin, ships megabytes instead of kilobytes, and no matter how well anchored it is an interpolation of the asset rather than the asset.
Drop-in
<!-- 1. in the hero, replace the <img> with a canvas --> <div class="inner"> <canvas data-madreselva-hero data-src="assets/hero-uv.png" data-object-position="0.56 0.42" data-pin="#hero" role="img" aria-label="A honeysuckle flower head fluorescing under ultraviolet light, resolving from coarse blocks to full resolution"> </canvas> </div> <!-- 2. widen one CSS selector so the canvas inherits the img box --> .hero-media img,.hero-media canvas{ /* rule body unchanged */ } <!-- 3. one script, no dependencies, defer is fine --> <script src="assets/madreselva-hero.js" defer></script> // That is the whole integration — three hunks, verified in // integration-preview.html. Optional attributes and their defaults: // data-from 0.18 · data-settle 0.34 · data-intro-duration 2600 · data-lens on // prefers-reduced-motion paints the composed photograph once and stops.
Also here
integration-preview.html — the live site file with the drop-in swapped in, three changed hunks, nothing else touched.