OpenTools

A one-page site for a shelf of design tools: Typeforge, Ideation Board, Mockup Studio, Glyphs, Pattern Gen, Beat Studio and Brand Handover.

The top of the page is the name, OpenTools, written as a gap in a field of silver glitter. Grab the word and drag it through the flakes; let go and it glides back. Click a name in the index below it, and a pop-up opens with what the tool is, what it does, and a video of it in use. From there you can step to the next tool or the previous one, or press Visit site to open the tool itself in a new tab.

The page is plain HTML, CSS and JavaScript. Its words and tools are edited in a Sanity studio that lives on the same site, at https://www.opentools.art/studio.

Editing the site

Open /studio and sign in with the Sanity account that owns the project.

• Site settings holds the Title, written in glitter at the top of the page and as the heading beside the bio, and the Bio. To link words in the bio, select them and press the link button.
• Tools lists every tool in the order the site shows them. Drag a row to move it.
• Open a tool to change its name, tagline, category, Tool link (where "Visit site" goes), description and features, or to upload a Demo video.
• Press Publish. The site picks the change up within about a minute.
• Hide from the site takes a tool off the page without deleting it.
• To add a tool, press the + at the top of the Tools list.

The first time, open Import in the studio's top bar and press the button. It copies the title, the bio and the seven tools the site already describes into the studio. Pressing it again leaves anything already there as it is.

Field	What it is
Name, Tagline	Shown at the top of the pop-up; the name also in the index
Link name	The tool's own address on the site, e.g. #typeforge
Category	Shown under the name in the index
Tool link	Where Visit site goes. Left empty, the button reads "Live link soon"
Demo video, Video still	Plays in the pop-up. Left empty, the tool's animated preview plays instead
Short description, Description, What it does, Runs, Built with	The breakdown in the pop-up
Source code link	The GitHub link in the pop-up. Left empty, it is hidden

Videos play muted on a loop. MP4, 10–30 seconds and under about 8 MB keeps the pop-up quick to open.

Adding a tool at its own address

Each tool lives at its own address, such as typeforge.opentools.art. Once, at Namecheap (Domain List → opentools.art → Advanced DNS), add a CNAME record with host * and value cname.vercel-dns.com. Every something.opentools.art then reaches Vercel, so no tool needs its own record there.

For each new tool:

1. In the tool's own Vercel project, open Settings → Domains and add name.opentools.art.
2. In the studio, press + in Tools, fill it in with https://name.opentools.art as its Tool link, and publish. It appears in the index within about a minute.

When the studio has nothing

index.html and assets/js/tools.js hold the copy the site shows until the studio has published its own, and whenever Sanity cannot be reached. They are also what Import copies in. Once it is in the studio, edit it there.

A tool added in the studio shows its video, or a plain frame without one. The seven tools above also have an animated preview each, drawn in assets/js/previews.js.

Linking straight to a tool

Every tool has its own address. opentools.art/#glyphs opens the page with Glyphs already showing. The back button closes the pop-up.

Looking at it locally

Open index.html in a browser, or serve the folder:

python3 -m http.server 8000
# then open http://localhost:8000

To work on the studio itself:

npm ci --prefix studio
cd studio && npm run dev      # http://localhost:3333/studio

Add http://localhost:3333 as a CORS origin in the Sanity project (with credentials allowed) to sign in locally.

Building

npm ci --prefix studio
npm run build                 # writes dist/, with the studio at dist/studio

The build copies the page and its assets into dist/, stamps each asset link with a hash of the file so browsers never keep a stale copy, and builds the studio into dist/studio. Vercel runs exactly this on every push; vercel.json holds the settings, so nothing needs setting in Vercel's dashboard.

Files

index.html             the page
assets/js/tools.js     the starting copy, used until the studio has tools
assets/js/previews.js  the animated preview drawn for each tool
assets/js/glitter.js   the glitter wordmark at the top of the page
assets/js/site.js      the index, the pop-up, and reading from the studio
assets/css/site.css    the look, and the motion of every preview
assets/og.png          the picture a shared link shows
assets/favicon.svg     the tab icon
studio/                the Sanity studio served at /studio
scripts/build.mjs      the build Vercel runs
vercel.json            hosting settings

Hosting

The site is on Vercel, project opentools, and lives at https://www.opentools.art, with opentools.art redirecting there. index.html names that address in its canonical link and share tags, so if the domain ever changes, change it there too.

The Sanity project is hha7i7up, dataset production. Its CORS origins must include the site's addresses, with credentials allowed, for the studio to sign in there.