# Spotlight Bento — Interactive Bento Grid Feature Section

> An interactive bento grid feature section: a timeline of features linked to image tiles, so the feature you point at takes the spotlight on both sides. Autoplay, light and dark themes, accessible, and works without JavaScript. Single HTML file, vanilla JS.

- Kind: Component (Timelines)
- Price: Free
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: timeline, features, grid, bento-grid, feature-section, html, vanilla-js, tailwindcss, dark-mode, saas
- Published: 2026-10-04
- Updated: 2026-10-04
- Page: https://upfork.dev/products/spotlight-bento-grid-feature-section

## How to get it

It's plain HTML, CSS and JS: nothing to install. Download it from its page (open index.html), or copy its page from the code there.

It's free with an UpFork account.

## About

A landing-page feature section where the two columns talk to each other: a feature list drawn as a timeline on the left, a bento grid of image tiles on the right. Point at a feature or a tile, or let autoplay run, and that feature takes the spotlight on both sides. Light and dark themes, accessible, works without JavaScript, and it's a single HTML file with no framework and no build step.

### What you get

- **A timeline that leads.** Each feature has a ring marker: the active one fills with its accent color and glows, the connector line draws down to it, and a thin line shows the autoplay progress.
- **A spotlight on the grid.** The active tile comes forward in full color with an accent-tinted border and glow, its caption rises with a one-line description, and the other tiles step back. The headline gradient, the backdrop glow and the button fade to the active feature's color.
- **Tiles with life.** A slow Ken Burns zoom and pointer parallax on the active tile, a sheen that follows the cursor, glass pills for the icon and category, and captions that read on any image. A tile can be a link or a button, and can hold a muted looping video.
- **Motion on arrival.** The eyebrow, the headline word by word, the list, then the tiles. The call to action has a shimmer, a magnetic pull and a nudging arrow.
- **Every screen size.** A bento grid on desktop (or a plain 2 × 2 grid), 2 × 2 on tablets, and a swipeable snap strip on phones where the snapped tile is the active feature.
- **Accessible and indexable.** A real tablist with arrow-key navigation, a polite live region, visible focus, JSON-LD for the features, and reduced motion that keeps only fades.

### Easy to make your own

The features live in one JSON block: title, description, accent color, category, icon, image or video, and link. There are options for autoplay, interval, layout, parallax and theme; `next()`, `prev()`, `goTo()`, `pause()` and `play()` plus an `sfs:change` event; and every color, radius and blur is a `--sfs-*` CSS variable.

### Light and fast

Only transform and opacity animate, the first image loads with high priority and the rest lazily, and nothing shifts while it loads. The script is 3.6 KB gzipped. Works in the latest Chrome, Edge, Firefox and Safari (17.5 or newer).

### What's in the download

`index.html` (open it and it runs), the sources in `src/` with a build script, the Geist font (SIL OFL 1.1) and four demo photos from Unsplash, free for commercial use. Swap in screenshots of your own product.