Bento Features
Feature showcase section with golden spiral background and bento grid layout
Bento Features
A stunning feature showcase section combining a golden spiral SVG background with a responsive bento grid layout. Features customizable spiral animations, hover effects, and dynamic visual depth.
Features
Bento layout. Minimal. Monochrome.
From Discovery to Delivery
ProcessResearch, product strategy, UX/UI, engineering, and release management — handled end-to-end by one team.
Performance-First Frontend
WebShip fast experiences: code-split bundles, edge caching, static + SSR hybrids, Core Web Vitals tracked in CI.
Stable, Typed Backends
APIType-safe APIs, resilient services, and predictable data layers. Observability and tests included by default.
Design Systems that Scale
DesignReusable tokens, components, and docs keep multi-product portfolios visually consistent and maintainable.
Zero-Downtime Deploys
DevOpsRollouts via blue-green/canary, automated migrations, and health gates so users never see a blip.
Install the component using the shadcn CLI:
npx shadcn@latest add @uimix/bento-featuresThis will automatically add the component to your project.
Copy and paste the following code into your project:
Make sure you have the required animations in your tailwind.config.js:
module.exports = {theme: { extend: {}}}Add the required classes to your global stylesheet:
/* SVG animations are generated dynamically */Usage
import FeaturesSection from '@/registry/default/bento-features'
export default function Page() {
return <FeaturesSection />
}Features
- •Golden Spiral Background - Animated Fibonacci spiral using golden angle mathematics
- •Bento Grid Layout - Responsive grid with variable span configurations
- •Hover Effects - Subtle hover interactions on card elements
- •Keyboard Shortcut - Press R to randomize spiral configuration
- •Azure Depths Theme - Deep blue gradient background with radial transitions
- •Customizable Cards - Easy-to-modify feature cards with meta tags