Sections featuresbentogridmetricsglassmorphism

Feature Bento Grid

Modern 6-slot Bento Grid feature showcase with live scores, telemetry badges, and code snippets.

Core Capabilities

Engineered for Extreme Performance

Everything you need to build next-generation Astro applications with zero runtime overhead.

Zero Runtime JS

Pure Static Architecture

Components ship zero client-side JavaScript by default, delivering perfect 100/100 Lighthouse performance scores out of the box.

100 Lighthouse Score

Performance

Accessibility

Best Practices

WCAG 2.1 AA

Accessible & Tested

Every button, input, and modal conforms strictly to WCAG AA guidelines with keyboard navigation and ARIA attributes.

CSS Tokens

Fluid Design Tokens

Seamless global variables for colors, typography scales, glass blurs, and border radiuses.

TypeScript 5.x

Strict Type Safety

Full TypeScript IntelliSense with prop auto-completion and compile-time validation in your IDE.

interface Props { variant: 'glass' | 'glow' }

Three.js & WebGL

Interactive 3D Galaxy & Visuals

GPU-accelerated particle galaxy backgrounds with smooth physics, mouse-follow damping, and hardware-accelerated shaders.

60 FPS Fluid Physics Engine

Usage

Copy the full block below to use this component with its imports.

---
import { FeatureBentoGrid } from 'astro-component-kit';
---

<FeatureBentoGrid />

Manual Installation

If you are not using the npm package, create a new file src/components/lib/FeatureBentoGrid.astro and paste the following code:

---
import { FeatureBentoGrid } from 'astro-component-kit';
---

<FeatureBentoGrid 
  badge="Core Capabilities"
  title="Engineered for Extreme Performance"
  subtitle="Everything you need to build next-generation Astro applications with zero runtime overhead."
/>

Quick Info

Category: Sections
Filename: FeatureBentoGrid.astro
Dependencies: None — pure Astro + CSS
Tags: featuresbentogridmetricsglassmorphism