Project Index — Setup

Setup

/09

Project Index is a single component. Drop it on a page and fill in your projects, and it works at every breakpoint — no CMS to set up, nothing to wire together. Everything after step two is optional.

01.

Add the component

Copy it from the Framer Marketplace and paste it onto any page. It lands 1200 wide — set Width → Fill in the property panel so it spans the page and follows every breakpoint. Full Height is on, so the section is one screen tall with everything centred in it.

02.

Add your projects

Open Projects in the property panel and click any project to edit it. Each one takes a number, title, year, category, image, an optional video and an optional link. It arrives with eight demo projects and their pictures; add your first image or video and the demo pictures switch off, so your list never mixes in ours.

03.

Size your images

The preview is 398 × 545 by default. Crop your images to that shape, or set Preview W and Preview H to match yours — anything else is cropped from the centre. On phone and tablet the picture keeps those proportions and takes its width from the grid.

04.

Add video

Drop an MP4 or WebM into Video; it takes priority over the image. Add a Poster as well — it shows before the video plays and on the canvas, which never plays it. Without one, the project’s image stands in.

05.

Choose a theme

Theme sets Light, Dark or Custom. Custom reveals every colour, plus Media Dim to ease photographs back on dark pages. Turn Show Background off to sit on your page’s own colour.

06.

Headline and type

Show Headline turns the title on or off and Headline changes its word. Show Count adds the live total beside it — /08 by default, shaped by Count Prefix and Count Digits. Type is Geist Light out of the box, a 32px headline over 10px rows; Headline Font, Row Font and Count Font take any other font in your project.

07.

Fit your grid

Columns, Gutter and Margin set the desktop grid; Title, Year and Category Col place each row on it. Full Height makes the section one screen tall; turn it off to set a fixed Height instead. A long list grows the section rather than clipping.

08.

Phone and tablet

Compact Layout decides how it works without hover. Scroll keeps one shared image and lets the scroll position choose the project; Feed gives every project its own picture. Scroll pins the list while it fits on screen and lets it flow under a pinned image when it doesn’t. Scroll Per Row sets the pace.

09.

Good to know

Breakpoints follow the component’s own width, so the canvas shows the layout that ships — use Layout to preview Grid or Stacked on a desktop frame. Visitors who prefer reduced motion get the card feed on touch and no cursor drift.