The `LighthouseAudits` component uses Framer Motion to create smooth, satisfying SVG circular progress animations for performance metrics. It's fully customizable and can dynamically adapt its accent color.
Live Preview
Installation
npx kinetic-ui-cli@latest add lighthouse-auditsProps
| Prop | Type | Default | Description |
|---|---|---|---|
auditCount | number | 4 | Number of audits to display (1-4). Adjusts layout dynamically. |
performance | number | 99 | Performance score to display (0-100). |
accessibility | number | 100 | Accessibility score to display (0-100). |
bestPractices | number | 100 | Best Practices score to display (0-100). |
seo | number | 100 | SEO score to display (0-100). |
color | string | '#10b981' | The primary accent color for the SVG progress circles and glowing effects. |
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { LighthouseAudits } from "@/components/creative/lighthouse-audits";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { LighthouseAudits } from "@/components/creative/lighthouse-audits";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<LighthouseAudits
auditCount{10}
performance{10}
accessibility{10}
/>
</div>
);
}