@Belkis · Elementa

Cell Division Loader

HTML

Organischer Loader mit 1024 Partikeln: eine Zelle teilt sich in viele kleine Zellen und verschmilzt wieder zu einer.

#loader #cell

@Belkis

WCAG 0

Starfield

Svelte

Ruhiges Sternenfeld mit funkelnden Punkten (echtes Svelte).

#stars #night

@Belkis

WCAG 0

Animated Aurora

Svelte

Fließende Aurora-Bänder mit weichem Verlauf (echtes Svelte).

#aurora #animated

@Belkis

WCAG 1

Morphing Blobs

Vue

Zwei organische Blobs, die langsam Form und Position verändern.

#blobs #morph

@Belkis

WCAG

Gradient Shift

React

Farbverlauf, dessen Winkel kontinuierlich rotiert (React-Animation).

#gradient #shift

@Belkis

WCAG 0

Floating Particles

React

Sanft schwebende Partikel, deren Positionen in React animiert werden.

#particles #float

Dot Pattern

Tailwind

Punkteraster mit sanftem Radial-Fade zu den Rändern.

#dots #pattern

@Belkis

WCAG 0

Mesh Gradient

Tailwind

Weicher Mehrfarb-Mesh-Verlauf als moderner Hintergrund.

#mesh #gradient

@Belkis

WCAG 0

Grid Glow

HTML

Technisches Raster mit leuchtendem Verlaufs-Schimmer in der Mitte.

#grid #glow

@Belkis

WCAG 0

Aurora Gradient

HTML

Sanft wabernde Aurora aus mehreren Verlaufs-Blobs.

#aurora #gradient

@Belkis

WCAG 0

Heart Favorite

Svelte

Herz-Umschalter, der beim Aktivieren aufpoppt (echtes Svelte).

#heart #favorite

Day/Night Toggle

Svelte

Schalter, der beim Umlegen die Szene von Tag auf Nacht wechselt (echtes Svelte).

#day #night

@Belkis

WCAG 0

Chip Multi-Toggle

Vue

Mehrfach auswählbare Filter-Chips mit aktivem Verlaufs-Zustand.

#chips #filter

@Belkis

WCAG

Labeled Switch

Vue

Schalter mit Ein/Aus-Text, der den Zustand anzeigt.

#switch #label

@Belkis

WCAG 0

Star Rating

React

Fünf Sterne mit Hover-Vorschau und Klick-Bewertung (React-State).

#rating #stars

@Belkis

WCAG 0

Theme Toggle

React

Umschalter, der zwischen Hell und Dunkel wechselt und die Fläche einfärbt (React-State).

#theme #toggle

@Belkis

Icon Switch

Tailwind

Schalter mit Sonne/Mond-Symbolen für den Theme-Wechsel.

#theme #icon

@Belkis

WCAG 0

Segmented Toggle

Tailwind

Zwei-Segment-Umschalter im Pillen-Stil.

#segmented #tabs

@Belkis

WCAG 0

Checkbox Pop

HTML

Runde Checkbox mit Verlaufs-Füllung und Haken.

#checkbox #check

@Belkis

WCAG

Gradient Switch

HTML

Klassischer Schalter, der im Ein-Zustand mit Verlauf leuchtet.

#switch #toggle

@Belkis

Expanding Search

Svelte

Such-Icon, das sich beim Klick zu einem Feld ausdehnt (echtes Svelte).

#search #expand

Animated Label Input

Svelte

Feld mit Label, das beim Tippen hochwandert (echtes Svelte).

#label #animated

@Belkis

PIN Input

Vue

Vier getrennte Felder für einen Bestätigungscode.

#pin #otp

@Belkis

Underline Input

Vue

Minimalistisches Feld mit animiertem Verlaufs-Unterstrich beim Fokus.

#underline #minimal

@Belkis

WCAG 0

Character Counter

React

Eingabe mit Live-Zeichenzähler, der bei Limit rot wird (React-State).

#counter #limit

@Belkis

WCAG 0

Password Toggle

React

Passwortfeld mit Auge-Button zum Ein-/Ausblenden (React-State).

#password #toggle

@Belkis

Textarea

Tailwind

Mehrzeiliges Feld mit Rahmen und Fokuszustand.

#textarea #form

@Belkis

WCAG 0

Focus Ring Input

Tailwind

Textfeld mit weichem Verlaufs-Fokusring.

#input #focus

@Belkis

WCAG 0

Search Input

HTML

Suchfeld mit Icon und leuchtendem Fokus-Rahmen.

#search #icon

@Belkis

WCAG

Floating Label Input

HTML

Textfeld, dessen Label beim Fokus nach oben gleitet.

#input #label

@Belkis

Typing Dots

Svelte

Chat-typische Schreibt-gerade-Punkte in einer Sprechblase (echtes Svelte).

#typing #chat

@Belkis

WCAG 0

Pulse Ring

Svelte

Kern mit auslaufenden Puls-Ringen (echtes Svelte).

#pulse #ring

@Belkis

WCAG 0

Gradient Bar Loader

Vue

Unbestimmter Ladebalken mit gleitendem Verlaufs-Segment.

#bar #indeterminate

@Belkis

WCAG 0

Orbit Loader

Vue

Punkt, der auf einer Bahn um einen Kern kreist.

#orbit #spinner

@Belkis

WCAG 0

Wave Bars

React

Fünf Balken, die als Welle auf- und abschwingen (React-Animation).

#bars #wave

@Belkis

WCAG 0

Circular Progress

React

Kreis-Fortschritt, der bis 100 % läuft und wieder von vorn beginnt (React).

#progress

Gradient Spinner

Tailwind

Conic-Verlaufs-Spinner mit dunklem Kern.

#spinner #conic

@Belkis

WCAG 0

Skeleton Loader

Tailwind

Platzhalter-Skelett mit Schimmer-Animation.

#skeleton #shimmer

@Belkis

WCAG 0

Bouncing Dots

HTML

Drei hüpfende Punkte im Verlauf – klassisch und leicht.

#dots #bounce

@Belkis

WCAG 0

Dual Ring Spinner

HTML

Zwei gegenläufige Ringe im Marken-Verlauf.

#spinner #ring

@Belkis

WCAG 0

Reveal Quote Card

Svelte

Zitat-Karte, die beim Laden sanft einblendet (echtes Svelte, fly-Transition).

#quote

Progress Card

Svelte

Fortschrittskarte mit animiertem Verlaufsbalken (echtes Svelte).

Notification Card

Vue

Benachrichtigungskarte mit Icon, die per Button geschlossen werden kann.

Hover Lift Card

Vue

Karte, die sich beim Hover anhebt und einen farbigen Schein bekommt.

#hover

Expandable FAQ Card

React

Ausklappbare Frage-Antwort-Karte mit sanfter Höhen-Animation (React-State).

#faq

Flip Card

React

Karte, die sich beim Klick in 3D umdreht und die Rückseite zeigt (React-State).

Profile Card

Tailwind

Kompakte Profilkarte mit Avatar, Bio und Aktionsbutton.

#profile #avatar

@Belkis

WCAG

Pricing Card

Tailwind

Preis-Karte mit hervorgehobenem Plan und Verlaufs-Button.

#pricing #plan

Gradient Border Stat Card

HTML

Statistik-Karte mit leuchtendem Verlaufs-Rahmen.

#stat #border

@Belkis

WCAG 0

Glass Feature Card

HTML

Glassmorphism-Karte mit Verlaufs-Icon und dezentem Rahmen.

#glass #feature

@Belkis

WCAG 0

Check Success Button

Svelte

Button, der beim Klick einen animierten Haken zeigt (echtes Svelte).

#success #check

@Belkis

Gradient Border Button

Svelte

Button mit rotierendem Verlaufs-Rahmen (echtes Svelte).

#border #gradient

@Belkis

WCAG 0

Like Pulse Button

Vue

Herz-Button, der beim Aktivieren pulsiert und die Farbe wechselt.

#like #heart

Magnetic Fill Button

Vue

Outline-Button, der sich beim Hover mit Verlauf füllt.

#fill #hover

@Belkis

WCAG 0

Async Loading Button

React

Button, der beim Klick in einen Ladezustand und dann auf Fertig wechselt.

#loading #state

Ripple Button

React

Button mit echtem Material-Ripple-Effekt am Klickpunkt (React-State).

#ripple #click

Gradient Pill Button

Tailwind

Vollrunder Verlaufs-Button mit sanftem Aufhellen beim Hover.

#gradient #pill

@Belkis

WCAG 0

Ghost Arrow Button

HTML

Dezenter Outline-Button, dessen Pfeil beim Hover nach vorne gleitet.

#outline #ghost

@Belkis

WCAG 0

Animated Cyber Glow Button

HTML

Ein interaktiver, freistehender Button mit einem weichen Leuchteffekt beim Hovern und einem physischen Klick-Feedback. Er hat keinen eigenen Hintergrund und integriert sich nahtlos in jede Umgebung.

Svelte Spring Magnetic Button

Svelte

Magnetischer Button mit echter Federphysik: svelte/motion-Spring folgt dem Cursor und schnappt sanft zurück. Zero-Dependency — die Physik bringt Svelte mit.

#svelte #spring

Animated Gradient Frame Button

CSS

Ein Button mit rotierendem Verlaufsrahmen aus Violett, Fuchsia und Cyan, der durch die kontinuierliche Drehung Aufmerksamkeit erzeugt und wichtige Call-to-Actions hervorhebt.

Glow Pulse Button

CSS

Ein Button mit weichem, pulsierendem Neon-Glow in Violett und Fuchsia, der auf dunklem Hintergrund lebendig leuchtet und den Nutzer sanft zur Interaktion einlädt.

#glow #pulse

Shine Sweep Button

CSS

Ein Button mit einem eleganten Licht-Reflex, der in regelmäßigen Abständen diagonal über die Cyan-Violett-Fläche gleitet und dem Element eine hochwertige, glänzende Anmutung verleiht.

#shine

Ripple Wave Button

CSS

Ein Button, der bei jedem Klick eine kreisförmige Wellen-Animation vom Klickpunkt aus erzeugt und so ein taktiles, materielles Feedback für den Nutzer liefert.

Arrow Slide Button

CSS

Ein Ghost-Button, der beim Hovern in einen Violett-Fuchsia-Verlauf übergeht und dessen Pfeil-Icon nach rechts gleitet, um dem Nutzer die Fortsetzung der Aktion zu signalisieren.

Spotlight Hover Card

CSS

Bouncing Dots

CSS

Drei springende Punkte in den Elementa-Markenfarben bewegen sich versetzt auf und ab, um einen freundlichen und verspielten Ladezustand im dunklen Design darzustellen.

#loader #dots

Gradient Ring

CSS

Ein rotierender Ring mit einem fließenden Verlauf von Violett über Fuchsia zu Cyan erzeugt einen modernen, hochwertigen Ladeindikator vor dunklem Hintergrund.

#loader #ring

@Belkis

WCAG

Bar Equalizer

CSS

Fünf vertikale Balken schwingen wie ein Audio-Equalizer in unterschiedlichen Rhythmen auf und ab und signalisieren so aktive Verarbeitung im dunklen Elementa-Look.

#loader

Pulse Comet

CSS

Ein Kometen-Spinner zieht einen leuchtenden Schweif um einen sanft pulsierenden Kern und verbindet so Rotation und Puls zu einem auffälligen Ladeeffekt im Dark-Theme.

Floating Label Input

CSS

Ein Eingabefeld mit schwebendem Label, das beim Fokussieren oder bei Eingabe elegant nach oben skaliert. Violetter Fokus-Ring, abgerundete Ecken und ruhige Bewegung im Dark-Theme.

Glow on Focus Input

CSS

Textfeld mit weichem, mehrschichtigem Leuchten in Fuchsia und Violett beim Fokussieren. Das Glühen lenkt die Aufmerksamkeit dezent auf das aktive Feld im dunklen Layout.

#input

Animated Gradient Underline

CSS

Minimalistisches Feld ohne Rahmen, dessen Unterstrich beim Fokussieren als Verlauf aus Violett, Fuchsia und Cyan von links nach rechts einfährt. Klar und modern im Dark-Theme.

Gradient Brand Toggle

iOS Style Toggle

CSS

Klassischer, minimalistischer Schalter im iOS-Stil mit weißem Knopf und sanfter Feder-Animation, der im aktivierten Zustand in der Erfolgsfarbe Grün leuchtet.

Neon Glow Toggle

Aurora Flow

CSS

Neon Grid Pulse

CSS

Ein leuchtendes Neon-Raster mit perspektivischer Tiefe, das im Rhythmus nach oben scrollt und dabei in Cyan und Violett pulsiert, um einen futuristischen Synthwave-Look im Dark-Theme zu erzeugen.

Floating Blobs Glow

CSS

3D Press Chunky

Conic Aurora Spinner

CSS

Ein flüssiger Spinner aus rotierendem Conic-Gradient mit weichem Glow und ausgestanztem Ring.

Morphing Gradient Blob

Neon Bar Equalizer

CSS

Fünf pulsierende Balken im Neon-Verlauf, die wie ein Audio-Equalizer tanzen.

Floating-Label Glow Input

CSS

Underline-Draw Input

CSS

Liquid Gradient Flow

CSS

Ein endlos wandernder, seidiger Verlauf, der Violett, Fuchsia und Cyan ineinander fließen lässt.

Belkis

Komponenten

Cell Division Loader

Starfield

Animated Aurora

Morphing Blobs

Gradient Shift

Floating Particles

Dot Pattern

Mesh Gradient

Grid Glow

Aurora Gradient

Heart Favorite

Day/Night Toggle

Chip Multi-Toggle

Labeled Switch

Star Rating

Theme Toggle

Icon Switch

Segmented Toggle

Checkbox Pop

Gradient Switch

Expanding Search

Animated Label Input

PIN Input

Underline Input

Character Counter

Password Toggle

Textarea

Focus Ring Input

Search Input

Floating Label Input

Typing Dots

Pulse Ring

Gradient Bar Loader

Orbit Loader

Wave Bars

Circular Progress

Gradient Spinner

Skeleton Loader

Bouncing Dots

Dual Ring Spinner

Reveal Quote Card

Progress Card

Notification Card

Hover Lift Card

Expandable FAQ Card

Flip Card

Profile Card

Pricing Card

Gradient Border Stat Card

Glass Feature Card

Check Success Button

Gradient Border Button

Like Pulse Button

Magnetic Fill Button

Async Loading Button

Ripple Button

Gradient Pill Button

Ghost Arrow Button

Animated Cyber Glow Button

Svelte Spring Magnetic Button

Animated Gradient Frame Button

Glow Pulse Button

Shine Sweep Button

Ripple Wave Button

Arrow Slide Button

Spotlight Hover Card

Bouncing Dots

Gradient Ring

Bar Equalizer

Pulse Comet

Floating Label Input

Glow on Focus Input

Animated Gradient Underline

Gradient Brand Toggle

iOS Style Toggle

Neon Glow Toggle

Aurora Flow

Neon Grid Pulse