effects

WarningTape

Scrolling warning tape banner like construction site tape.

npx chaos add warning-tape

PREVIEW

WARNING • ERROR • SYSTEM FAILURE • WARNING • ERROR • SYSTEM FAILURE • WARNING • ERROR • SYSTEM FAILURE • WARNING • ERROR • SYSTEM FAILURE • WARNING • ERROR • SYSTEM FAILURE •

USAGE

import { WarningTape } from '@/components/chaos/effects/warning-tape';

<WarningTape>SYSTEM ERROR • CRITICAL</WarningTape>
<WarningTape bgColor="#ffff00" textColor="#000">CAUTION</WarningTape>
<WarningTape reverse rotation={2}>REVERSE</WarningTape>

PROPS

PropTypeDefault

childrenText to scroll

string-

bgColorBackground color

string"#ff0040"

textColorText color

string"#000000"

durationScroll duration in seconds

number20

rotationRotation angle in degrees

number-1

reverseReverse scroll direction

booleanfalse