Zum Inhalt springen
UI Kit
Accent

Visuals

Bilder für deine Seiten, in Code gezeichnet

Geräte-Mockups, Motion-Grafiken und Illustrationen. Sie nehmen deinen Inhalt auf, folgen Light und Dark Mode und deinem Accent und installieren sich wie jede Component.

2 Components · 16 Variants

Mockups

Browserfenster, Telefone, Laptops und Geräteszenen mit deinem Inhalt darin.

Alle Mockups
Live-PreviewMockup-Szenen · Desktop und TelefonCode

3 Components · 16 Variants

Kampagnen-Mockups

Social Posts, E-Mails und Store-Screenshots als Bilder für deine Seiten, ohne Zeichen eines Netzwerks oder Stores.

Alle Kampagnen-Mockups
Live-PreviewSocial-Post-Mockup · BildbeitragCodeIm Studio öffnen
  • Social Posts als Bilder für deine Seite, ohne das Zeichen eines Netzwerks. Bildbeiträge, Textbeiträge, Stories, Karussells, Video-Reels und ein Profilraster. Doppeltippen zum Liken, Speichern, Folgen, Bilder wischen und durch Stories tippen.

  • E-Mail-Mockup

    5 Variants

    E-Mails als Bilder für deine Seite. Ein Newsletter im Mailfenster, der Posteingang, in dem er ankommt, eine Bestellbestätigung, die Mail auf dem Telefon und eine Willkommensreihe. Aus JSON-Blöcken gebaut, so zeigt das Mockup deine echte Mail.

  • Die hohen Rahmen mit Überschrift und Telefon, die App-Seiten in einer Reihe zeigen, ohne Zeichen eines Stores. Überschriften, ein Panorama über alle Rahmen, geneigte Telefone, aufspringende Hinweise und breite Tablet-Rahmen. Die Reihe scrollt per Ziehen, Pfeilen und Tastatur.

4 Components · 12 Variants

Animations

Bewegte Szenen in SVG und CSS. Chats, Cursor, Dashboards und Seiten, die sich selbst aufbauen.

Alle Animations
Live-PreviewDashboard-Aufbau · AnalyticsCode
  • Chat-Szene

    3 Variants

    Ein Gespräch, das sich selbst schreibt. Tipp-Punkte, ein Eingabefeld, das tippt und sendet, Karten in Nachrichten. Darunter springt nie etwas.

  • Cursor-Szene

    3 Variants

    Ein Zeiger arbeitet sich durch eine Oberfläche, und die Oberfläche antwortet im selben Takt. Zeigt einen Ablauf ohne Video.

  • Ein Dashboard, das sich im Blickfeld zusammensetzt: Karten steigen auf, Zahlen zählen, die Linie zeichnet sich, Balken wachsen, der Ring füllt sich. "live" hält es im Fluss.

  • Seitenaufbau

    3 Variants

    Components heben aus einer Palette ab, fliegen an ihren Platz und landen, bis die Seite fertig ist und veröffentlicht wird. Von selbst oder mit dem Scrollen.

3 Components · 9 Variants

Daten-Animationen

Daten, die zwischen Systemen fließen, ein drehender Globus mit Bögen und Pins und Netzwerke, in denen Signale nach außen laufen.

Alle Daten-Animationen
Live-PreviewDatenfluss · PipelineCode

4 Components · 21 Variants

Mikroanimationen

Icons, die sich mit Bedeutung bewegen, Statussymbole, die sich selbst zeichnen, Konfetti für gute Momente und Zeichnungen beim Scrollen.

Alle Mikroanimationen
Live-PreviewAnimierte Icons · Alle IconsCode
  • Animierte Icons

    6 Variants

    Sechzehn Icons, die sich mit Sinn bewegen, wenn du auf sie oder ihren Knopf zeigst. Gleiches Raster und gleicher Strich wie die Kit-Icons.

  • Haken, die sich zeichnen, ein Fehler, der einmal wackelt, drei Spinner, ein Ring, der sich füllt, und ein Live-Puls. Nur SVG und CSS.

  • Feiern

    5 Variants

    Momente der Freude für deine Seite, von Konfetti und Regen über einer Karte bis zu Feuerwerk, Kanonen von der Seite und funkelnden Sternen. Eine feste Ebene, die die Seite nie verbreitert, Farben aus dem Theme, ruhig bei reduzierter Bewegung. Aus dem Code, per Klick oder beim Hereinscrollen.

  • Eine Strichzeichnung, die sich beim Scrollen zeichnet und beim Zurückscrollen wieder verschwindet. Vier Zeichnungen dabei, eigene SVG-Pfade gehen auch.

5 Components · 18 Variants

Graphics

Gezeichnete App-Screens, Fotos, Karten, Spot-Illustrationen und handgezeichnete Anmerkungen für jede Branche.

Alle Graphics
Live-PreviewSpot-Illustrationen · Das SetCodeIm Studio öffnen
  • Annotationen

    5 Variants

    Handgezeichnete Markierungen, die auf etwas zeigen. Pfeile in fünf Formen, Klammern, Haken, Kreuze, Durchstreichungen, Betonungsstriche, nummerierte Marken und Notizen zeichnen sich beim Hereinscrollen selbst, jede mit ihrem eigenen leichten Zittern.

  • Sechzehn kleine Zeichnungen in einem Stil für Features, leere Zustände, Schritte und Bestätigungen. Sicherheit, Tempo, Wachstum, Team, Lieferung, Hilfe, Suche, Posteingang, Dateien, Kalender, Zahlung, Erfolg, Offline, Hochladen, Ort und Ideen. Sie nehmen die Theme-Farben an und setzen sich beim Hereinscrollen zusammen.

  • Fotos, gezeichnet in SVG, für Bildplätze. Gerichte, Getränke, Orte, Häuser, Räume, Porträts, Cover und Markenboards in natürlichen Farben, dazu tonale Szenen, die dem Theme folgen.

  • UI-Grafiken

    2 Variants

    Gezeichnete App-Screens, Dashboards, Telefon-Screens, erfundene Logos, Presselogos, App-Zeichen, Avatare, eine Unterschrift und ein Code. In den Farben des Themes, bereit für jeden Bildplatz.

  • Eine Stadtteilkarte für eigene Pins, ein Stadtplan mit Beschriftung, eine kleine Karte für Kontaktbereiche und ein Grundriss mit Raumnamen. In den Farben des Themes.

3 Components · 17 Variants

Muster und Formen

Hintergrundmuster, dekorative Formen und Bildeffekte in den Farben des Themes, von Punkten und Konturen bis Duoton und Reveals.

Alle Muster und Formen
Live-PreviewFormen · KompositionCode
  • Muster

    8 Variants

    Hintergrundmuster in den Farben des Themes. Punkte, Raster, Linien, Höhenlinien, Korn, Lichtfelder, Wellen, Raster-Punkte und Ringe, jeweils mit Ton, Ausblendung, Seed und einer sehr langsamen Drift.

  • Bildeffekte

    5 Variants

    Behandlungen für jedes Bild. Ein Duoton im Akzent wird beim Hover farbig, Enthüllungen zeigen es beim Scrollen, eine flüssige Welle läuft darüber, ein Farbspot wandert über die graue Fassung, und Streifen kommen nacheinander an. Bewegt werden nur Filter, Clip-Path, Maske und Transform.

  • Formen

    4 Variants

    Abstrakte Formen zur Dekoration, gezeichnet in SVG mit den Farben des Themes. Blobs, Ringe, Bögen, Stapel, ein Umlauf, ein Wellenband, eine Blüte, eine Punktkugel, ein Schnörkel und ein Stern, mit ruhigem Schweben, Drehen und Atmen.

3 Components · 15 Variants

Platzhalter und Generatoren

Platzhalterbilder für jede Branche, Logos und Avatare aus einem Seed für Mockups, Logo Clouds und Teamseiten.

Alle Platzhalter und Generatoren
Live-PreviewPlatzhalterbilder · Alle BranchenCode
  • Avatare aus einem Seed gezeichnet, für Platzhalter, neue Konten, Demodaten und Kommentare. Gezeichnete Gesichter, geometrische Zeichen, Verlaufskugeln mit Initialen und Pixel-Stempel. Derselbe Name gibt immer dasselbe Bild.

  • Logo-Generator

    5 Variants

    Platzhalter-Marken aus einem Seed für Logoreihen, Mockups und Fallstudien. Zwölf Familien von Zeichen, geseedete Wortmarken in der einen Schrift, Logos nebeneinander und gestapelt und App-Icons. Derselbe Name gibt immer dieselbe Marke, keine sieht aus wie eine echte Firma.

  • Platzhalterbilder, die wie das Foto aussehen, das später in den Platz kommt. Siebzehn Branchen mit je mehreren Motiven, einem Bildchip und einem Größenhinweis für Bauende. Keine Dateien, keine Anfragen.

Warum in Code gezeichnet

  • Scharf in jeder Größe

    SVG und CSS skalieren vom Telefon bis 4K, ohne ein einziges unscharfes Pixel.

  • Deine Farben

    Jedes Visual folgt den Tokens, Dark Mode und dein Accent greifen von selbst.

  • Dein Inhalt darin

    Mockups nehmen deine Screens als Props, Grafiken deine Worte und Zahlen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert