Case study · Animation studio website
OFFWALL character animation that walks off the wall.
A scroll-driven site for a character animation studio — frame counter, hotspot model sheet, pencil-to-colour slider and the full film.
This is the real website. Scroll it, tap it, try it. On a phone it’s best full screen.
- Type
- Animation studio website
- Sector
- Animation & film
- Sections
- 8
- Built with
- Hand-coded · no templates
About the site
OFFWALL turns things meant to sit still — mascots, logos, murals, products — into moving characters. Its website practises what it preaches: the studio’s own character, Inkrunner, steps off a painted wall as you scroll, with a frame counter and timecode ticking along in the corner.
The idea
An animation studio has to prove it understands timing, so the site is paced like a sequence: four beats (the step out, weight, timing, the landing), then the craft behind them, then the process and services, and finally the finished film with sound.
What we built, section by section
- 01
Painted on a wall. Not staying there.
The hero, with “Start a project” and “Watch with sound”.
- 02
Four beats
Scroll-paced steps on the principles of animation.
- 03
Meet Inkrunner
A model sheet with six numbered callouts on the design.
- 04
Under the paint
Drag between the blue-pencil drawing and the finished colour frame.
- 05
Twelve seconds, eight passes
The production pipeline from thumbnails to compositing, as a draggable strip.
- 06
What we put on the sheet
Services with typical lengths and turnaround.
- 07
The full film
The 12.6-second piece, with sound.
- 08
Got a character stuck on a wall?
The enquiry form, with a two-working-day reply promise.
From the build
Films and pictures from inside the OFFWALL website. Swipe through.
Features
- Scroll-driven sequence with frame counter and timecode
- Clickable hotspots on the model sheet
- Pencil-to-colour comparison slider (keyboard friendly)
- Draggable production-pipeline strip
- Full-screen film with sound
- Preloader (“Inking frames…”)
- Project enquiry form
Look and feel
Near-black with paint, ink, neon and blue-pencil motifs — like a light box in a dark studio. The copy is playful and terse and uses the language of the craft: timing, in-betweens, hang time.
Under the bonnet
- Scroll-linked animation, hand-coded
- Lazy-loaded WebP image pipeline
- Custom accessible before/after slider
- Native video in a pop-up
- Open Graph and Twitter cards
Like everything I build, it’s made from scratch. No page builder, no theme. So it’s quick, it works on phones first, and it’s easy to change later.
