Corner — Gradient Studio

A JavaScript canvas editor with smooth and ordered-dither gradient styles, built with Vite and npm. Choose any corner under Gradient → Corner and set Gradient → Background color (default #151515). Export a PNG still or a seamlessly looping GIF/APNG at the selected resolution, or choose Cropped to export only the corner's full animated extent. All libraries are bundled locally; the app needs no CDN, backend, or CMS.

Development

Use Node.js 24 (nvm use if you use nvm), then run from the repository root:

npm ci
npm run dev

Open the local URL printed by Vite. The dev server reloads changes to the source files.

Build and preview

npm run build
npm run preview

Vite generates the static site in dist/. The preview server serves that build locally. Generated files are ignored by Git.

Tests

npx playwright install chromium
npm test

npm run test:unit checks geometry, rendering, loop continuity, and animation encoding. npm run test:browser builds and tests the production site, covering controls, animation, dragging, keyboard input, persistence, setup files, PNG and animated exports, cancellation, and mobile touch. Alternatively, set CHROMIUM to an existing Chrome/Chromium executable.

GitHub Pages

In the repository's Settings → Pages → Build and deployment, select GitHub Actions as the source.

The Pages workflow installs dependencies, runs tests against a production build, and deploys dist/ after pushes to main. Pull requests run the same checks without deploying. You can also run the workflow manually on main.

The workflow builds with the repository name as the base path (/corner/ for lookitscook/corner), targeting https://lookitscook.github.io/corner/. To test that path locally:

VITE_BASE_PATH=/corner/ npm test
VITE_BASE_PATH=/corner/ npm run preview

For a custom domain or a user/organization Pages site at the domain root, set the workflow's VITE_BASE_PATH to /. This follows Vite's GitHub Pages deployment guidance.

Structure

index.html              Vite entry page
src/main.js             Editor UI, state, and exports
src/engine.js           Geometry and Canvas 2D rendering
src/corner.js           Corner selection and coordinate mapping
src/logo.js             Cook artwork and editor/preview placement
src/render-settings.js Rendering parameters and validation
src/export-settings.js Export parameters and size limits
src/animation-*.js     Worker, encoders, and export lifecycle
src/styles.css          Layout and control styling
public/                 Static assets and third-party license
tests/                 Geometry and Playwright browser tests
docs/editor.md         Controls and rendering guide
.github/workflows/      GitHub Pages build and deployment

See the editor guide for controls and rendering details.