Freeframe
Sign in
Portfolio8 pages · 0 downloads · Free

Rillmark

An editorial, kinetic portfolio for an independent motion designer and director, with a live showreel, case studies and a fee estimator.

Stack: HTML + Tailwindv1.0.0 changelog

DocsLive demo Download .zip157 KB

About this template

Rillmark is a complete website for the fictional Dundee motion studio of director Marika Drever: title sequences, brand motion, explainer animation and music videos. The home page plays a showreel drawn live in SVG from the projects, with play, pause and scene controls that respect reduced motion. Fifteen projects filter by discipline and year with search and a saved shortlist, each with its own case study and styleframe scrubber; the services page estimates a fee with a full breakdown in pounds, and the journal and availability roll forward so the demo never goes stale.

Features

  • Showreel drawn live in SVG from six projects, with timecode, scene list, play/pause and previous/next, autoplaying only when motion is allowed and pausing off screen
  • Fifteen projects from one data file, each with its own animated SVG artwork that plays a few seconds of the film on hover
  • Work index with discipline chips and live counts, a year filter, search and shareable ?discipline=, ?year= and ?q= links
  • Shortlist saved in localStorage (in memory when storage is blocked), shown in a side panel and attached to the enquiry as references
  • A case study for every project (?project=): brief, a styleframe scrubber with timecode, four styleframes, process, results, credits and a quote
  • Fee estimator in GBP by service, duration, style, rounds of changes, rush and extras, with a line-by-line breakdown, VAT, deposit, schedule and delivery date
  • Availability, the earliest start and reply dates worked out in UK time with Scottish bank holidays and the studio's winter closure
  • Journal with topic filters and notes that open in place, dated so they roll forward and never go stale
  • Validated project enquiry with budget, finish date and brief, ending in an "enquiry received" state with a reference and next steps
  • Kinetic variable-width type (Anybody) that stretches in and widens on hover, all of it off with reduced motion

Pages included

Quick start

unzip rillmark.zip && cd rillmarkopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Rillmark documentation →

Changelog

  1. v1.0.0

    Added

    • Seven pages and a 404 for Rillmark, the fictional Dundee motion studio of director Marika Drever: home, work, case study, services and fees, journal, about and contact.
    • Home page showreel drawn live in SVG from six projects, with timecode, progress, a scene list, play/pause and previous/next. It autoplays only when motion is allowed, pauses off screen and in hidden tabs, and shows stills with reduced motion.
    • Fifteen projects in assets/js/data.js, each with its own SVG artwork drawn from a motif and palette, which plays a few seconds of the film on hover.
    • Work index with discipline chips and live counts, a year filter, search and a shortlist-only view (work.html?discipline=, ?year=, ?q=, ?shortlist=1).
    • Shortlist of saved projects in localStorage (kept in memory when storage is blocked), shown in the header, the work page panel and the enquiry form.
    • Case study for every project from the same data (project.html?project=): brief, a styleframe scrubber with timecode, four styleframes, process, results, credits, a quote and previous/next links.
    • Fee estimator in GBP (services.html?service=): service, duration, style, rounds of changes, rush and extras, with a breakdown, VAT, deposit, schedule, earliest start and delivery date; the estimate can be sent with an enquiry.
    • Journal of dated notes with topic filters (journal.html?topic=), notes that open in place and dates that roll forward with KEEP_DEMO_CURRENT.
    • About page with an illustrated portrait, working principles, five collaborators, the Dundee studio, kit and recognition.
    • Project enquiry with validation, budget, finish date and brief, saved references and estimate, ending in an "enquiry received" state with a reference, a reply date and next steps.
    • Availability, earliest start and reply dates worked out in Europe/London time with Scottish bank holidays and the studio's winter closure, plus a ?now= preview parameter.
    • Anybody, Gelasio and Red Hat Mono from Google Fonts, kinetic variable-width headlines, a PNG social image, SVG favicon, accessible mobile menu, skip link and scroll reveals, all respecting reduced motion.

More templates