react-halloween

react-halloween

This is a repo with some fun Halloween-themed components. It was made to support the Halloween section of patrickgillespie.com. If you scroll to the bottom of that page, you can see the Haunted and Eyes components in-action. You can see the LightsOut component on the Halloween Houses page, and the MagicalText component in the app's title bar.

Currently this library is still in a 0.* version, so its APIs may change. However, I feel pretty confident in what I have now, and I'm debating moving to version 1.0.0 in my next release.

Install

framer-motion is a peer-dependency.

  npm install framer-motion react-halloween

Demo

Storybook

To see a storybook, which contains demos of all of the components do the following: Clone the repo, install the deps, and then run the storybook.

  npm ci
  npm run storybook

Components

<Eyes />

A set of eyes which open and close and follow the cursor. This component accepts the following props:

Name	Type	Default	Description
animationTime	number	0.75	Time it takes for the eyes to open or close in seconds.
eyeBallColor	string	"white"	CSS color for the eyeball.
eyeLayout	string or object	'unfriendly'	Defines the shape of the eye. Either a string representing a preset ("unfriendly", "menacing", "neutral"), or an object defining the details. See here for more info.
follow	boolean	true	If the eyes should follow the cursor.
irisColor	string	"#333"	CSS color for the iris.
open	boolean	true	Indicates if the eyes are open.
style	object	{}	Style props to spread onto the container.
pupilColor	string	"white"	CSS color for the pupil.
pupilSize	number	1	Number between 0 and 2, representing the pupil size.
width	number	200	The width of the component. The underlying SVGs will size themselves depending on this.

<Eye />

An eye which can open and close and can follow the cursor. This component accepts the following props:

Name	Type	Default	Description
animationTime	number	0.75	Time it takes the eye to open or close.
closedClipPath	string	'M 0 4 C 3 4 7 4 10 4 C 7 4 3 4 0 4'	Clip path for a closed eye.
eyeBallColor	string	'white'	CSS color of the eye.
follow	boolean	true	If the eye should follow the cursor.
irisColor	string	'#333'	CSS color of the iris.
open	boolean	true	Indicates if the eye is open.
openedClipPath	string	'M 0 4 C 3 7 7 7 10 4 C 7 1 3 1 0 4'	Clip path for an opened eye.
pupilColor	string	'black'	CSS color of the pupil.
pupilCoords	object	{cx:5,cy:4}	The coordinates of the pupil.
pupilSize	number	1	Pupil size. Should be a number between 0 and 2.
width	number	50	Width of the eye.

<Haunted />

A container which creatures (by default ghosts) will fly out of and which will glow when the cursor is hovered over it. This component accepts the following props:

Name	Type	Default	Description
Creature	component	see here	Prop for overriding the creature that flies out of the container.
creatureOptions	object	see here	Options for the creatures that fly out of the container.
creatureOptions.animationTime	number	1.5	Fly-out time in seconds.
creatureOptions.numberOf	number	6	Number of creatures/ghosts to fly out.
creatureOptions.distance	number	200	Distance creature should travel in pixels.
creatureOptions.dimensions	object	{ width: 44, height: 44 }	The height and width of the creature/ghost.
disableFun	boolean	false	true to turn off the effects.
glowOptions	object	see here	Options for the glow effect.
glowOptions.animationTime	number	3	Duration of glow in seconds.
glowOptions.boxShadowOff	string	"0px 0px 0px rgba(255,0,0,0)"	Box-shadow value when at glow lowest point.
glowOptions.boxShadowOn	string	"0px 0px 40px rgba(255,0,0,1)"	Box-shadow value when at glow highest point.
style	object	{}	Style props to spread over the container.

<LightsOut />

Puts a website into darkness and creates a spotlight around the mouse. This should not be used for mobile/touch devices. This component accepts the following props:

Name	Type	Default	Description
size	number	300	Size of the spotlight around the mouse.
darkColor	string	'rgba(0,0,0,0.9)'	Color of the backdrop.
clickToTurnOnLights	boolean	false	true to turn off the effects.
zIndex	number	100000	z-index of overlay

<MagicalText />

Not your granddaddy's color faded text, this component creates a gradient that moves and has (optional) sparkles or other adornments (such as ghosts or hearts). Initial idea was inspired by a Hyperplexed video. The adornments which appear around the text are simple SVG components. This library contains several which can be used with this component. You can see what these look like here.

This component accepts the following props:

Name	Type	Default	Description
text	string	''	The text to display.
animationTime	number	10	Length of the fade animation in seconds.
colors	Array	['darkorange', 'purple']	Array of CSS colors to fade.
fadeText	boolean	true	true if text should be color faded, false otherwise.
disableFun	boolean	false	true to disable fade and adornment effects.
style	object	{}	Style props to spread over the container.
Adornment	Component	StarCrossSVG	Component to use as the adornment. Several come from the library. See examples.
showAdornments	boolean	true	If the adornments/sparkles should be shown.
adornmentOptions	Object		Options to customize the adornment.
adornmentOptions.animationType	One of: 'sparkle', 'scale'	'sparkle'	How the adornment will be animated.
adornmentOptions.width	number	16	Width of adornment.
adornmentOptions.height	number	16	Height of adornment.
adornmentOptions.opacity	number	0.7	Opacity of adornment.
adornmentOptions.duration	number	1	Duration of adornment in seconds.
adornmentOptions.numberOf	number	3	Number of adornments.