āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/magicuidesign/magicui/components/flickering-grid ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
npx shadcn@latest add @magicui/flickering-grid
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource name="flickering-grid" /><Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </Tabs>import { FlickeringGrid } from "@/components/ui/flickering-grid"
<FlickeringGrid />
| Prop | Type | Default | Description |
| --------------- | -------- | ---------------- | ------------------------------------- |
| squareSize | number | 4 | Size of each square in the grid |
| gridGap | number | 6 | Gap between squares in the grid |
| flickerChance | number | 0.3 | Probability of a square flickering |
| color | string | "rgb(0, 0, 0)" | Color of the squares |
| width | number | - | Width of the canvas |
| height | number | - | Height of the canvas |
| className | string | - | Additional CSS classes for the canvas |
| maxOpacity | number | 0.2 | Maximum opacity of the squares |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā