React-halloween NPM

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.