feat(site): turn the demo page into a landing page - #40
Merged
Conversation
The page at h4md1.fr/visual-image-tool/ opened on an <h1> and a canvas. It demonstrated the tool without ever saying what the tool is for, what you get back from it, or why you'd pick it over a cropper — so a visitor who didn't already know had to infer the pitch from a controls panel. Restructures it around the demo rather than replacing it. The demo stays at the top, because dragging the marker is what actually explains this library, but it now sits under a headline and a one-line pitch, and above the two things that decide adoption: the table of what the coordinates are for (object-position, imgix, Cloudinary, sharp), and an explicit "no, if" naming Cropper.js for the job this library deliberately doesn't do. Every claim comes from the README or package.json — 3.6 kB gzipped, zero dependencies, bundled types, MIT. Nothing measured here for the first time. The head metadata, the demo markup and its animation script are unchanged; this is a body and stylesheet rewrite. Adds a copy button on the install command, light/dark support, and pins the CDN snippets to 0.3.0 — the README still pointed at @0.2, two minor versions back. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This was referenced Sep 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The page at h4md1.fr/visual-image-tool/ currently opens on an
<h1>VisualImageTool</h1>and a canvas. It demonstrates the tool without ever saying what it's for, what you get back, or why you'd pick it over a cropper — a visitor who doesn't already know has to infer the pitch from a controls panel.What changed
Restructured around the demo rather than replacing it. The demo stays at the top, because dragging the marker is what actually explains this library — but it now sits under a headline and a one-line pitch, and above the two things that decide adoption:
focusPoint→object-position/ imgix / Cloudinary andcropZone→ sharp / ImageMagick table. This is the differentiator and it wasn't on the page at all.Then: install (npm + CDN), the shortest runnable snippet, the UMD
VisualImageTool.VisualImageToolgotcha called out inline, framework examples, an API table, browser support.What did not change
<head>— canonical, OG/Twitter cards, favicons,theme-colorwere already correct.This is a body + stylesheet rewrite.
Honesty
Every claim traces to the README or
package.json: 3.6 kB gzipped, zero dependencies, bundled TypeScript declarations, MIT, current browsers. Nothing was measured here for the first time and no feature is claimed that isn't implemented.Also pins the CDN snippets to 0.3.0. The README still pointed at
@0.2, two minor versions behind, while telling readers to pin exactly — fixed in the same commit.Verified in a browser
window.VisualImageToolis an object, output is valid JSON withfocusPoint/cropZone/focusActive/cropActive.<pre>scrolls, inside itself.Adds
A copy button on the install command, and light/dark support via
prefers-color-scheme.🤖 Generated with Claude Code