Playground
Interactive controls to tune Shine options in real time.
This recreates the dynamic playground from apps/demo/src/app/dynamic-demo/page.tsx.
Interactive playground
Use this page to test how option combinations behave before copying values into production components.
shadowRGB#000000
Shine Playground
Inverted colors in dark mode
Note: In the previews, the colors are inverted in the dark mode.
Starter usage
"use client";
import { Shine } from "@hazya/shinejs/react";
export function PlaygroundStarter() {
return (
<Shine
as="h1"
options={{
light: {
position: "followMouse",
intensity: 1,
},
config: {
numSteps: 5,
opacity: 0.15,
opacityPow: 1.2,
offset: 0.15,
offsetPow: 1.8,
blur: 40,
blurPow: 1,
shadowRGB: { r: 0, g: 0, b: 0 },
},
}}
>
Shine Playground
</Shine>
);
}