typingfx/dist/index.css

Customizable, smooth, and snappy typing animations for React — built for natural, human-like effects with minimal config.

.tfx_typeout{--speed: 30;--delSpeed: 60}.tfx_typeout *{transition:all 0s!important}.tfx_word{--w: 0px;--n: 0;display:inline-flex;overflow:hidden;width:0;position:relative}.tfx_hk,.tfx_processing{--n: 0;height:0!important;padding:0!important;margin:0!important;opacity:0}.tfx_hk *,.tfx_processing *{width:auto!important}.tfx_type{animation:tfx_type steps(8) calc(var(--n) * 1s / var(--speed))}.tfx_del{animation:tfx_del steps(8) calc(var(--n) * 1s / var(--delSpeed))}.tfx_wait{width:0!important;height:0!important}.tfx_cursor .tfx_cursor,.tfx_wait.tfx_del,.tfx_wait.tfx_type{width:auto!important;height:auto!important}.tfx_wait.tfx_type{animation-duration:var(--d)}.tfx_wait.tfx_del{animation-duration:var(--r)}.tfx_cursor .tfx_cursor:after,.tfx_cursor .tfx_type:after,.tfx_cursor .tfx_del:after{content:" ";position:absolute;top:13%;height:72%;right:0;width:2px;background:currentColor;animation:tfx_blink .75s infinite}.tfx_paused *{animation-play-state:paused!important}.tfx_component{position:relative;text-wrap:nowrap;height:auto;width:-moz-fit-content;width:fit-content}.tfx_component.tfx_type{animation:tfx_fadein 5s}.tfx_component.tfx_del{animation:tfx_fadeout 3s}.tfx_component.tfx_type,.tfx_component.tfx_del{height:auto!important}.tfx_component.tfx_type:after,.tfx_component.tfx_del:after{all:unset}@keyframes tfx_blink{50%{opacity:0}}@keyframes tfx_type{0%{width:0;height:auto}to{width:var(--w);height:auto}}@keyframes tfx_del{0%{width:var(--w);height:auto}to{width:0;height:auto}}@keyframes tfx_fadein{0%{opacity:0}to{opacity:1}}@keyframes tfx_fadeout{to{opacity:0}}