Light Position and Intensity
Follow the mouse, set fixed positions, or animate custom paths.
light.position accepts either "followMouse" or a fixed point. For auto-pilot, animate a fixed {x, y} path each frame.
Follow mouse
Overview
Follow Mouse
Usage
<Shine as="h2" options={{ light: { position: "followMouse" } }}>
Follow Mouse
</Shine>;update({ light: { position: "followMouse" } });shine.update({ light: { position: "followMouse" } });Auto-pilot animation
Overview
Auto Pilot
Usage
const [lightPosition, setLightPosition] = useState({ x: 0, y: 0 });
<Shine as="h2" options={{ light: { position: lightPosition } }}>
Auto Pilot
</Shine>;
const t = Date.now() * 0.00025 * Math.PI * 2;
setLightPosition({
x: window.innerWidth * 0.5 + window.innerWidth * 0.4 * Math.cos(t),
y: window.innerHeight * 0.5 + window.innerHeight * 0.4 * Math.sin(t * 0.7),
});const animate = () => {
const t = Date.now() * 0.00025 * Math.PI * 2;
update({
light: {
position: {
x: window.innerWidth * 0.5 + window.innerWidth * 0.4 * Math.cos(t),
y: window.innerHeight * 0.5 + window.innerHeight * 0.4 * Math.sin(t * 0.7),
},
},
});
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);const animate = () => {
const t = Date.now() * 0.00025 * Math.PI * 2;
shine.update({
light: {
position: {
x: window.innerWidth * 0.5 + window.innerWidth * 0.4 * Math.cos(t),
y: window.innerHeight * 0.5 + window.innerHeight * 0.4 * Math.sin(t * 0.7),
},
},
});
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);Fixed point
Overview
Fixed Point
Usage
<Shine as="h2" options={{ light: { position: { x: 480, y: 220 } } }}>
Fixed Point
</Shine>;update({ light: { position: { x: 480, y: 220 } } });shine.update({ light: { position: { x: 480, y: 220 } } });Intensity
Overview
High Intensity
Usage
<Shine as="h2" options={{ light: { intensity: 2, position: "followMouse" } }}>
High Intensity
</Shine>;update({ light: { intensity: 2 } });shine.update({ light: { intensity: 2 } });Recommendation
Higher intensity amplifies perceived depth. Start around 1.0 and increase gradually.