Bento Closer Look

"use client"

import { PlusIcon } from "@phosphor-icons/react"
import * as React from "react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?w=1000&q=80&auto=format&fit=crop`

type Feature = {

A feature spotlight with a list of features on one side and a photo on the other that cross-fades to match the open item. The list advances on its own every four seconds until someone opens an item, then stays put. On mobile the photo moves above the list. Use it to walk through a handful of product features without a carousel.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/bento-closer-look

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks bento-closer-look

Manual

1. Install the dependencies:

$ pnpm add @phosphor-icons/react

2. Add the pieces it builds on: Accordion.

3. Copy the source into components/blocks/bento-closer-look.tsx:

"use client"

import { PlusIcon } from "@phosphor-icons/react"
import * as React from "react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?w=1000&q=80&auto=format&fit=crop`

type Feature = {

4. Update the import paths to match your project.

Usage

import { BentoCloserLook } from "@/components/blocks/bento-closer-look"

<BentoCloserLook />

Edit the features array; each entry has a title, description, image and alt text. Change the 4000 ms interval or the heading in the component. Nothing needs wiring to a backend.

Notes

The automatic rotation keeps running under reduced motion until the user opens an item, so drop the interval if that matters for your audience. Photos are Unsplash placeholders.