DirectionalBlur.tsx

DirectionalBlur.tsx

import type { FunctionComponent, PropsWithChildren } from 'react'

export const DirectionalBlur: FunctionComponent<
	PropsWithChildren<{
		spread?: number
		blur?: number
		rotationDeg?: number
	}>
> = ({ children, spread = 100, blur = 0.5, rotationDeg = 0 }) => {
	return (
		<span
			style={{
				display: 'inline-block',
				filter: `blur(${blur}em)`,
				transform: `rotate(${-1 * rotationDeg}deg) scaleY(${1 / spread})`,
			}}
		>
			<span
				style={{
					display: 'inline-block',
					transform: `scaleY(${spread}) rotate(${rotationDeg}deg)`,
				}}
			>
				{children}
			</span>
		</span>
	)
}