Integrations
Plug into the tools your team already answers from.
AI Solutions That Propel Your Business Forward
Built to help service leaders scale efficiency and deliver exceptional support through intelligent AI automation, 24/7.
Book a Demo2.5B+
Customer messages answered by our agents last year.
83%
Up to 83% of conversations autonomously resolved
projects
Automation Driven Support Excellence
Bento tiles
A centred headline over a wall of soft raised tiles that answer the pointer, and a bento of six cards below: integrations, two counting figures, a scanned portrait, a world map with a folder, and avatars on orbits.
Use when: AI and SaaS products with a few strong numbers, the tools they connect to and a human face to show, on a calm light page.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/bento-tilesFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| nav | object | — | A top bar inside the hero, for pages without their own header. Leave it out when the site has one. |
| brand * | string (1–24 chars) | — | The product's name, at the top left. |
| links * | object[] (≤ 5) | — | Page links, in the middle; hidden on phones. |
| label * | string (1–24 chars) | — | |
| href * | string (≥ 1 chars) | — | |
| cta | object | — | The button at the top right, e.g. Log in. |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| headline * | string (8–70 chars) | — | The promise in two lines, 5–9 words. |
| subheadline | string (≤ 160 chars) | — | One or two sentences under the headline. |
| cta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| integrations * | object | — | |
| title * | string (2–28 chars) | — | |
| description * | string (≤ 90 chars) | — | |
| apps * | object[] (1–4) | — | |
| name * | string (1–32 chars) | — | |
| icon * | string (≥ 1 chars) | — | A square logo, SVG or image. |
| stat * | object | — | The figure under the integrations. |
| value * | string (1–8 chars) | — | The figure as it reads, e.g. 2.5B+ or 83%. It counts up from zero; prefix and suffix stay. |
| label * | string (4–90 chars) | — | What the figure means, one short sentence. |
| portrait * | object | — | The tall card: a portrait, black and white works best. Red crosses cover the face and scan it. |
| src * | string (≥ 1 chars) | — | |
| alt * | string (4–160 chars) | — | What the image shows, for screen readers. |
| focus | unknown[] (2–2) | — | Where the face is in the card, in percent from the top left. Default 50, 56. |
| highlight * | object | — | The figure on the accent card; a bar fills to it when it is a percentage. |
| value * | string (1–8 chars) | — | The figure as it reads, e.g. 2.5B+ or 83%. It counts up from zero; prefix and suffix stay. |
| label * | string (4–90 chars) | — | What the figure means, one short sentence. |
| folder * | object | — | |
| label * | string (1–20 chars) | — | The folder's name on the dark card, over the world map. |
| orbit * | object | — | |
| title * | string (4–60 chars) | — | The wide card's statement, three short lines. |
| people * | object[] (1–6) | — | Avatars placed on the orbits; they turn when the card is pointed at. |
| src * | string (≥ 1 chars) | — | |
| alt * | string (4–160 chars) | — | What the image shows, for screen readers. |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| accent | string | "oklch(0.88 0.12 125)" | The figure card's colour. |
| marks | string | "oklch(0.62 0.23 27)" | The crosses scanning the portrait. |
| gradient | string[] (2–3) | ["oklch(0.86 0.09 225)","oklch(0.94 0.03 250)","oklch(0.91 0.06 40)"] | The wide card's gradient, from left to right. |
| tiles | boolean | true | The wall of raised tiles behind the headline. |
| tileSize | number (48–160) | 104 | The tiles' size, in pixels. |
| pointer | boolean | true | Tiles rise and catch the light under the pointer; the crosses follow it. |
| idle | boolean | true | Now and then a tile presses in, like a key. |
| intro | boolean | true | Tiles, headline and cards arrive in turn; the figures count up. |
| showNav | boolean | true | Show the top bar when the content has one. |
The same hero as a Web Component
<sg-bento-tiles>
The same engine, driven by attributes: smaller tiles, an amber figure card, blue crosses, a mint-to-lilac gradient.
Plain HTML
Six cards marked with data-sg-card.
1,200
Figures with commas count too.
64%
A percentage fills the bar.
archive