Security Dial is a trust visual: a fingerprint draws itself inside a scanning dial, corner brackets pulse around it, and compliance chips for SOC 2, CCPA, and ISO stagger in below. Built with Framer Motion and React. Card copy is prop driven. A strong tile for security and compliance sections on enterprise facing pages.
Installation
Install dependencies.
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import SecurityDial from "@/components/pro/blocks/security-dial";
<SecurityDial />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
cardTitle | string | "Advanced Security" | Title shown in the card overlay. |
cardDescription | string | "Regular third-party audits and penetration tests." | Description shown in the card overlay. |