Kleine Effekte für npm-Websites, installierbar per Kommando in jedes Projekt — node scripts/add-effect.mjs <effekt> <ziel-app>. Hover über eine Karte für die Live-Demo.
Text erscheint Buchstabe für Buchstabe, mit blinkendem Cursor — bekannt von ChatGPT & Co.
Elemente faden/gleiten ein, sobald sie in den Viewport scrollen.
Layer bewegt sich langsamer/schneller als die Seite beim Scrollen.
Milchig-transparente Fläche mit backdrop-filter: blur() — für Cards & Navbars.
Kleiner Partikel-Burst beim Klicken — gezielte Mikro-Animation für Feedback.
Karte hebt sich mit weichem Schatten beim Überfahren mit der Maus.
Buttons, die dem Cursor leicht folgen, bevor er sie trifft.
Karte kippt in 3D dem Cursor entgegen — reines CSS transform: perspective(), kein WebGL.
Loop-Video als Hero-Hintergrund mit Overlay — wirkt hochwertiger als ein Standbild.
Bildschirm in zwei Hälften geteilt, die gehoverte Seite wächst.
Zweifarbiger Verlaufs-Filter über einem Bild via mix-blend-mode.
Button mit sanften Schatten, wirkt wie aus dem Hintergrund herausgedrückt.
RGB-Split-Glitch-Animation — ideal für kreative Fehlerseiten.
Animierter Clippy-artiger Assistent mit Sprechblase & Buttons — reine Skript-Logik, keine KI, kein Netzwerk.
# One command, drops the component into ANY Next.js/React project.
# No CSS file to wire up — the component injects its own styles at runtime.
node E:\WebApps\website-types\scripts\add-effect.mjs scroll-reveal e:\WebApps\MyOtherApp
# See all installable effects:
node E:\WebApps\website-types\scripts\add-effect.mjs listimport { TypewriterText } from "@/components/effects/TypewriterText";
<TypewriterText text="Willkommen bei Aeron." speed={35} />