Experiment · 2025 · 08 / 10
Sketchfolio.
A hand-drawn portfolio surface where every scene animates like it is being sketched, with a physics playground and a visitor-drawable canvas stitched in.
- Context
Sketchfolio is an interactive art-portfolio experiment built in Next.js 15 and React 19, themed around the feel of pencil on warm cream paper. Every decorative scene is an SVG whose strokes animate in via Anime.js timelines, colour fills drop afterwards at lower opacity, and a subtle jitter loop keeps the shapes breathing so they never read as laser-cut vectors. Interleaved through the page are a Matter.js paper-physics sandbox and a custom HTML-canvas drawing tool with its own procedural paper-noise texture, so the surface is both gallery and sketchpad at once.
- Approach
The framing question was whether a portfolio could feel properly drawn without a single bitmap asset. Everything illustrative is therefore an SVG: landscapes, trees, suns, clouds, frames. Anime.js drives per-path stroke-dashoffset reveals, then staggered fill-element opacity, then a permanent alternating jitter loop at one to two pixels of translate and half a degree of rotation. The physics scene is a self-contained Matter.js world with a mouse constraint, a throw force on drag end, and a pause toggle that raises air friction so papers settle in place. The visitor canvas writes its own paper texture at init by dropping hundreds of low-alpha noise dots onto a cream fill before any stroke is drawn.
- Outcome
Sketchfolio shipped as a Netlify-deployed experiment in 2025 and now lives in the archive as a colour study and motion study rather than a live portfolio. It stayed around as the reference for how much character a purely SVG-and-canvas surface can carry, and several of its patterns (stroke-dashoffset timelines, alternating jitter loops, interleaved interactive sections) informed later work.
- Process
- 01
Ink before pixels
The whole surface is built around SVG paths with stroke-dashoffset reveals. Anime.js timelines draw each line in sequence, then drop colour fills on top, then loosen the shapes with sub-pixel jitter so nothing looks laser-cut. The goal was for every scene to land as if it had just been drawn.
- 02
Paper that pushes back
The physics surface is a full Matter.js world: twelve paper scraps with chamfered corners, air friction, mouse constraint, and a throw force applied on drag release. Toggle freezes gravity and stiffens friction so the scene composes itself instead of settling.
- 03
Let the visitor draw
A custom canvas layer supports pen and eraser, variable stroke, colour, and an Escape-to-clear shortcut, over a procedurally generated paper-noise texture. It runs alongside SVG path-drawing prompts so the same page is both a gallery and a sketchpad.
- Credits
- Design & build
- Salah Boussettah
- Next
→ Interactive Terminal Website
Experiment · 2025