Pellicola

Build cinematic case study pages — the kind you see on film production company sites, documentary showcases, and photographer portfolios. Warm analog palette, domain-specific components, scroll-choreographed reveals. Single-file HTML, zero build step.

"Pellicola" is Italian for film — literally "little skin," the celluloid stock.

Creative Direction

The aesthetic is analog cinema on the web — warm cream backgrounds like unbleached paper stock, deep ink-black text, a single red accent reserved exclusively for the play button. Typography pairs a dramatic display serif (headlines, names) with a precise geometric sans (labels, navigation). Every image is framed like a film still — cream padding, rounded corners, subtle shadow creating a polaroid/celluloid look.

If the minoan-frontend-design skill is available, read it for broader aesthetic principles. Pellicola encodes those principles into a concrete design system for the cinematic case study genre. Pages built with Pellicola should score 16+/20 on /design-audit and 28+/40 on /design-critique.

Name the conceptual direction before coding. Default: "analog screening room." Override with project-specific direction when appropriate — "70mm documentary," "festival press kit," "darkroom portfolio."

Quick Start

# Generate a full case study page
python3 scripts/pellicola_generator.py --mode case-study --title "Taboo" --output taboo.html

# Generate just the hero section
python3 scripts/pellicola_generator.py --mode hero --title "Ana Maxim" --output hero.html

# Generate a credits grid
python3 scripts/pellicola_generator.py --mode credits --output credits.html

# Generate a dark footage gallery
python3 scripts/pellicola_generator.py --mode gallery --output gallery.html

# Validate a pellicola page
python3 scripts/validate_pellicola.py output.html

Or let Claude generate directly from the templates and references.

Modes

Components (9)

Copy-paste HTML snippets for every component: references/component-catalog.md.

Color System

All components read from --pel-* CSS custom properties. Override at :root to re-theme:

:root {
  /* Background */
  --pel-cream: oklch(97.5% 0.012 85);
  --pel-cream-deep: oklch(95% 0.015 80);
  --pel-black: oklch(10% 0 0);

  /* Text */
  --pel-ink: oklch(15% 0.005 80);
  --pel-ink-muted: oklch(40% 0.01 80);
  --pel-ink-light: oklch(98% 0 0);

  /* Accent */
  --pel-red: oklch(55% 0.22 25);

  /* Borders */
  --pel-border: oklch(85% 0.01 80);
  --pel-border-dark: oklch(25% 0 0);

  /* Typography */
  --pel-font-display: 'Playfair Display', 'Cormorant Garamond', serif;
  --pel-font-body: 'DM Sans', 'Outfit', sans-serif;

  /* Easing */
  --pel-ease: cubic-bezier(.19, 1, .22, 1);
  --pel-ease-back: cubic-bezier(.175, 0, .77, 1);
  --pel-duration: 0.8s;
  --pel-duration-long: 1.1s;
}

Full token reference: references/design-tokens.md. OKLCH palette deep-dive: references/color-system.md.

Typography

Display serif carries the cinematic weight — dramatic, editorial, italic for emphasis. Geometric sans handles navigation, labels, metadata — precise and clean. Never Inter, Roboto, Arial, or system-ui. Follow minoan-frontend-design font reflex-reject procedure.

Primary pairings (Google Fonts):

Alternative pairings:

• Cormorant Garamond (display) + Outfit (body)
• Lora (display) + Karla (body)

Full pairing guide: references/typography-pairing.md.

Scroll Animation System

Pellicola uses declarative data-pel attributes to orchestrate scroll-triggered reveals via IntersectionObserver. No animation library required.

All animations respect prefers-reduced-motion — reduced to instant opacity with no transforms.

Full spec with IntersectionObserver setup and stagger math: references/animation-system.md.

Section Sequence

Case study pages follow a canonical section order. Sections can be omitted but the order is fixed:

1. Hero — Film-frame image, title, genre label, play button
2. Credits — Director card + credit grid
3. Footage / Gallery — Dark-background image grid
4. Prizes — Festival awards and selections
5. Investors / Partners — Logo grid or text list
6. Next Project — Navigation to adjacent case study

Each section separated by a pel-section-divider with label text.

Full page architecture: references/page-architecture.md.

Implementation Rules

1. Vanilla only. No React, Vue, Svelte, Angular. Plain HTML + CSS + JS.
2. Single-file output. Everything in one HTML file. CDN imports for Google Fonts and optional Phosphor Icons only.
3. Warm-first. Body background is --pel-cream, not white, not dark. The dark gallery is one section, not the whole page.
4. --pel-* tokens everywhere. Never hardcode colors — always reference custom properties.
5. prefers-reduced-motion required. Every data-pel animation must have a reduced-motion fallback.
6. requestAnimationFrame only for parallax scroll. Never setInterval.
7. Semantic HTML. <article> for case study, <section> for each content block, <figure> for images, <dl> for credits.
8. Skip link required. <a href="#main" class="pel-skip-link"> as first body child.
9. Credits are grids, not cards. Role/name pairs in a CSS grid with border separators — not card containers with shadows.
10. One accent, one purpose. --pel-red is for the play button only.

Anti-Patterns

• Never use white (#FFFFFF) backgrounds — always --pel-cream
• Never use card containers with shadows for credits — use bordered grid cells
• Never use avatar circles for the director portrait — cropped photographic portrait with dark overlay
• Never use Inter, Roboto, or system-ui — follow font reflex-reject
• Never animate on page load without IntersectionObserver — all reveals are scroll-triggered (hero title is the sole exception)
• Never use --pel-red for anything except the play button
• Never omit prefers-reduced-motion — all data-pel animations must respect it
• Never use height transitions for panels — use grid-template-rows: 0fr → 1fr
• Never use a dark background for the whole page — dark gallery is one section within cream
• Never generate a case study without the canonical section sequence — order is hero → credits → footage → prizes → investors → next-project

Expanded explanations: references/anti-patterns.md.

Post-Build QA

After building, run these passes in order:

1. /design-audit — Technical checks (a11y, performance, responsive, theming, anti-patterns). Target: 16+/20
2. /design-critique — UX review (Nielsen's heuristics, cognitive load, persona testing). Target: 28+/40
3. /design-polish — Final pass (alignment, spacing, interaction states, transitions)

Cross-Skill References

Generator Script

python3 scripts/pellicola_generator.py \
  --mode case-study|hero|credits|gallery \
  --title "Film Title" \
  --director "Director Name" \
  --year 2024 \
  --runtime "93 min" \
  --genre "Documentary" \
  --output output.html

Validation

python3 scripts/validate_pellicola.py output.html

Checks: viewport meta, --pel-* properties, no framework imports, cream background, prefers-reduced-motion, Google Fonts loaded, data-pel attributes, semantic HTML, skip link, no Inter/Roboto/system-ui.

References

Attribution

Design patterns deconstructed from siena.film (Webflow, Apr 2026). Technologies: Lenis (smooth scroll), IntersectionObserver (scroll reveals), CSS Grid (credit layouts), grid-template-rows (panel animations).