IFFDAYIFFDAYDesign
Film and community

FilmHeader

The still across the top of a film page, framed on its focus and faded into the page.

import { FilmHeader } from '@iffday/web/src/film-media';

Example

The banner at the top of a film page. The still is scaled and moved around the point in header.focus, so people stay in frame, and its lower part fades into the page, where the title and poster sit. A 3:2 still loses at most 16% of its height, which brings it to 16:9, the frame BIFF’s own site uses.

The Handmaiden
On a film page the banner runs the full width of the window under the header; in this frame it is fitted to the frame’s width.

Usage

  • The banner takes landscape stills only, never a poster. A film without a still has no banner.
  • The fade is set by the CSS variables --film-header-fade-above and --film-header-below, 0.4 and 0.416 by default.
  • Add ?header-debug to a film page’s address for a panel that edits those variables and outlines the steps of the fade.

Props

FilmHeader

apps/web/src/film-media.tsx:193
PropTypeDefault
title*string
images*FilmVisuals
ordinal

Edition number drawn in the corner. Festival banners only.

number | null
ordinalPhasestring