react-magical-typewriter
Version:
A customizable typewriter effect component for React with GSAP animations
2 lines (1 loc) • 1.18 kB
CSS
.react-magical-typewriter-container{display:inline-block;position:relative;white-space:normal;word-break:normal;overflow-wrap:normal;text-align:left;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}.clip-path-overflow{clip-path:polygon(0 -5%,100% -5%,100% 105%,0% 105%)}.react-magical-typewriter-char{display:inline-block;position:relative;white-space:pre-line;will-change:transform,opacity,filter,clip-path}.typewriter-word-or-space-segment{display:inline-block}.react-magical-typewriter-cursor{display:inline-block;margin-left:.25rem;-webkit-user-select:none;user-select:none}.cursor-invert-horizontal{transform:scaleX(-1)}.cursor-invert-vertical{transform:scaleY(-1)}.cursor-invert-both{transform:scaleX(-1) scaleY(-1)}.cursor-rotate-270{transform:rotate(270deg);transition:transform .3s ease}.react-magical-typewriter-char.char-lasersketch-overflow{overflow:hidden}.react-magical-typewriter-ghost,.react-magical-typewriter-fragment{display:inline-block;pointer-events:none;white-space:pre-wrap;will-change:transform,opacity}.react-magical-typewriter-fragment,.char-lasersketch{overflow:hidden}.char-radialburst{position:relative;z-index:1}.char-ghosttrail-active{z-index:2}