Canvas
Halo
Atmospheric scattering based halo effect with dynamic camera rotation and sun light simulation.
Preview
Atmospheric scattering halo with adjustable orbit speed, camera distance, and sun direction.
Attributes
Installation
pnpm dlx motion-blocks add haloUsage
---import "@/components/motion-blocks/halo-element.ts";--- <motion-halo scale={1} offset-x={0} offset-y={0} rotation={0} rotation-speed={0.5} background-color="#17181A" camera-distance={3} sun-x={0} sun-y={0} sun-z={1} intensity={1} class="w-full h-[500px]"/>API Reference
| Attribute | Type | Default |
|---|---|---|
scale Scale of the halo sphere. | number | 1 |
offset-x Horizontal offset of the halo center. | number | 0 |
offset-y Vertical offset of the halo center. | number | 0 |
rotation Initial rotation angle in degrees. | number | 0 |
rotation-speed Auto-rotation speed of the camera around the halo. | number | 0.5 |
background-color Background color behind the halo. | string | "#17181A" |
camera-distance Distance of the camera from the halo center. | number | 3 |
sun-x X component of the sun light direction vector. | number | 0 |
sun-y Y component of the sun light direction vector. | number | 0 |
sun-z Z component of the sun light direction vector (toward viewer). | number | 1 |
intensity Brightness and intensity of the atmospheric scattering. | number | 1 |