--- title: "Halftone Lab" url: https://www.coframe.com/halftone-lab format: agent version of this page (the same facts as the page, as text) updated: 2026-10-07 --- # Halftone Lab: scroll morph through the steps Scroll down. Each step's AI image is traced on the outperform wave's grid; between steps the dots scatter and land in the next shape. The morph follows the scroll with inertia: a fast flick still plays the full scatter at a capped speed. Earlier motion experiments are below the walkthrough. Product walkthrough ## One system, from idea to impact. 1. 01Ideate Coframe learns your site, audience, and goals to develop experiments. 2. 02Prioritize Score and rank experiment ideas by expected conversion and revenue impact, so you can run the most promising tests first. 3. 03Design Generate copy and image variations informed by your brand guidelines. Work with Coframe's CRO experts to refine the experience, then approve what goes live. 4. 04Build Turn ideas into working components, layouts, and experiences. AI writes the code, checks it across devices, and iterates on bugs. 5. 05Learn Measure conversion, identify winning variations, and have Coframe generate follow-up experiments based on the results. 01 / 05 ## Halftone Lab: motion Every panel uses the outperform wave's spec: 5.51px grid, #ABABAB squares from 0.45px to half a cell. Drawn on canvas each frame, paused off-screen, one still frame with reduced motion. 01 ## Light sweep across the layers A soft band of light travels across the silk. Only the shape's own dots grow, so the background stays empty and the folds catch the light one after another. source loading… 02 ## Scroll morph: wave, silk, cheetah Scroll position picks a point between shapes; each cell crosses over on its own schedule, so it dissolves rather than crossfades. Drag the slider to scrub. source scroll loading… 03 ## Cursor lens on the cheetah Hover the art: dots near the cursor magnify and grow. When not hovered, the lens drifts on a slow path so you can see it here. source loading… 04 ## Build in on reveal, then still Plays once when the art enters view: cells pop in at 1/3, 2/3 and full size, left to right with scatter, the same rhythm as the customer cards. Static afterward. source loading… 05 ## Fabric ripple Each cell reads the image through a slow noise displacement of a few pixels, so the silk breathes as if in a breeze. Dots never leave the grid. source loading… 06 ## Halftone video: the hero cheetah The hero's cheetah clip, traced live every frame onto the same grid. source loading… ## 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=6ac5dec1b588f46d1ae017be&token=22a65113ef89f01d36f12b31&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=6ac5dec1b588f46d1ae017be&token=22a65113ef89f01d36f12b31&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": "6ac5dec1b588f46d1ae017be", "token": "22a65113ef89f01d36f12b31" } ``` - **WebMCP**: if your browser supports it, the page registers the tool `share_visitor_needs`. `needs` is up to 2000 characters; `constraints` up to 1000.