A ReactJS library component for creating dynamic text shadows that shift with mouse movement or page scroll.
Install stalking-shadows
from npm:
npm install @akibeulah/[email protected]
The stakling-shadows
component uses the cursors location on the screen to cast a text or box shadow dynamically on the dom, like a sun casting shadows on the ground.
Shadows get fuzzy when the cursor is far from the subject, but becomes sharp when the cursor gets closer.
import { TextShadow } from "@akibeulah/stalking-shadows";
class Component extends React.Component {
render() {
return (
<TextShadow walkX={26} walkY={30} shadowColor={"#000"}>
This text has a shadow
</TextShadow>
);
}
}
See example here: https://timely-kleicha-2df130.netlify.app/
Props | Required | Type | Default | Description |
---|---|---|---|---|
walkX | true | number | N/A | Sets the mousemove sensitivity of shadow on the x-axis |
walkY | true | number | N/A | Sets the mousemove sensitivity of shadow on the y-axis |
shadowColor | true | string | N/A | Specifies the colour of the being cast by the text or box |