Sections / Gems / Scroll and type effects
Lens Index
A long list of names (clients, projects, places) seen through a lens. The row in the middle of the box swells and the rows around it make room, like type under a magnifier, while its picture slides in from the edge and leans with the scroll speed. A whole archive in one section: scroll it, click a name or walk it with the arrow keys.
- Kind
- Scroll and type effects
- Interaction
- scroll · fisheye type · image reveal · keyboard · links · real list
- Dependencies
- None
- Licence
- Licensed with Full Access, for the sites you build; do not resell the gem itself
Formats
- Webflow (native)
- Figma (layers)
- Framer component
- HTML
- Prompts for Claude Code, Cursor, Lovable, v0, Bolt
Copy to Webflow pastes a native section with the gem in an Embed inside it. Copy to Figma pastes a frame of its best moment, text and controls as layers. Copy to Framer pastes a component with its options as controls. HTML is one self-contained snippet. Each prompt (Claude Code, Cursor, Lovable, v0, Bolt) carries the exact files, so your agent installs this gem, not a lookalike. With the MCP server, ask your agent for get_section("lens-index").
Behaviour and accessibility
- It is a real ordered list of buttons (or links, when items have an href): the middle row is the one Tab reaches, arrow keys, Page Up and Down, Home and End walk the list, and the middle row carries aria-current.
- Scrolling uses the browser's own scroll inside the box, so wheels, trackpads and touch work as usual and the page carries on once the list ends; it settles on the nearest row when you stop.
- A link row only follows on the second click, once it is in the middle, so the first click always shows its picture.
- Drawing stops as soon as the list is still, and entirely off screen or in a background tab.
- With prefers-reduced-motion: rows jump to the middle, pictures cut, and the panel does not lean.
Options
| Option | Type | Default | What |
|---|---|---|---|
items | LensItem[] | 12 built in | The rows, in order. |
magnify | number | 2.6 | How much the middle row grows over the others. |
snap | boolean | true | Settle on the nearest row when scrolling stops. |
theme | 'dark' | 'light' | "dark" | Colour scheme. |
controls | boolean | true | Show the counter in the corner. |
label | string | "Index" | Accessible name of the list. |
startIndex | number | 0 | Row centred first. |
onChange | (index: number) => void | Called when another row reaches the middle. |
Free