Demo · Richtiges Passwort: knochen
Ein Login aus echtem Glas: Jeder Fehlversuch bricht das Passwortfeld ein Stück weiter ab – beim dritten friert alles ein. Teste es live oder kopier dir den Prompt.
Ein Prompt, ein Hintergrundbild, zehn Minuten. Keine Programmierkenntnisse nötig – nur eine Coding-KI und ein Browser.
One prompt, one background image, ten minutes. No coding skills needed – just a coding AI and a browser.
Wichtig: das Motiv auf eine Seite, auf die andere Seite unscharfe Objekte – dort sitzt später die Glas-Karte. Speichern als img/bg.jpg, mindestens 1920 px breit.
Important: put the subject on one side and blurry objects on the other – that's where the glass card goes. Save it as img/bg.jpg, at least 1920 px wide.
stylized 3D render, Pixar / Disney animation style, cute puppy astronaut with a glass helmet and an orange collar, big expressive brown eyes, placed on the right third of the frame, looking slightly left, floating bones out of focus on the left side, deep navy space background with warm orange bokeh, soft cinematic lighting, shallow depth of field, 16:9
Diesen Prompt komplett in einen neuen Chat deiner Coding-KI kopieren. Texte, Farben, Versuche und Sperrzeit kannst du vorher direkt im Prompt ändern.
Copy this prompt into a new chat with your coding AI. You can change texts, colours, attempts and lock time right in the prompt.
Baue eine Login-Seite als eine einzelne index.html (HTML, CSS, JavaScript, keine Libraries, kein Build). HINTERGRUND - Vollbild-Hintergrundbild img/bg.jpg (cover), leichte Parallaxe zur Maus (max. 12 px), dunkler Verlauf unten. - Die Login-Karte sitzt links, vertikal mittig; mobil darunter, volle Breite. GLAS-KARTE (so hochwertig wie möglich) - Breite 420 px, Radius 32 px, Innenabstand 30 px. - backdrop-filter: blur(22px) saturate(180%) brightness(1.08); Hintergrund heller Verlauf (weiß 18 % → 3 % → 10 %). - Mehrere Schatten: oben weiße 1-px-Innenkante, weicher heller Innenschein oben links, großer weicher Schlagschatten. - Rahmen 1,2 px als conic-gradient (weiß, eisblau #9FE7FF, gold #FFB547) per mask-composite, Winkel folgt der Maus. - Glanz: radial-gradient an der Mausposition (soft-light) + feines SVG-Rauschen. - Leichte 3D-Neigung zur Maus (max. 5°). - Echte Lichtbrechung am Rand (nur Chrome/Edge, sonst Fallback auf blur): SVG-Filter als backdrop-filter: url(#lens) mit feGaussianBlur → feImage → feDisplacementMap (scale 64) → saturate 1.7. Die Verschiebungskarte per Canvas in Kartengröße erzeugen: abgerundetes Rechteck, in einem 26-px-Rand die Pixel nach innen verschieben (Stärke quadratisch zur Kante), R = x-Verschiebung, G = y-Verschiebung, 128 = neutral. Bei Größenänderung neu erzeugen (ResizeObserver). INHALT Logo, oben rechts „Versuche“ mit 3 kleinen Balken, Überschrift „Willkommen zurück“, Unterzeile, E-Mail-Feld, Passwort-Feld mit Auge-Button, Button „Anmelden“ (Orange-Verlauf #FF4F1F → #FFB547), Statuszeile, Trenner „oder“, Button „Mit Passkey anmelden“, „Noch kein Konto? Registrieren“. Schrift Plus Jakarta Sans. Felder: dunkles Glas im Glas, Fokus mit goldenem Ring. DIE MECHANIK: 3 Versuche, dann Zeitsperre - Richtiges Demo-Passwort: „knochen“. Alles andere ist ein Fehlversuch. - Das Passwortfeld besteht aus zwei übereinanderliegenden Teilen mit komplementärem clip-path: links ein Stummel (ca. 50 px, Schloss-Icon), rechts der Körper mit dem Input. Die Trennlinie ist zackig (z. B. 50,0 → 44,14 → 53,27 → 46,41 → 51,56 px). Ungebrochen sieht es aus wie ein Feld. - Drehpunkt des Körpers: unten an der Bruchkante (transform-origin: 51px 100%). - Fehlversuch 1: Körper dreht sich um 3° nach unten (die rechte obere Ecke löst sich schräg), weiße leuchtende Risslinie an der Bruchkante zeichnet sich ein (SVG, stroke-dashoffset), feine Haarrisse auf dem Feld, kleine Glassplitter fallen mit Schwerkraft herunter, Karte ruckelt kurz. - Fehlversuch 2: 6,5°, mehr Risse, mehr Splitter. - Fehlversuch 3: Körper fällt ein Stück (translateY 34 px, rotate 10°, beschleunigend) und verblasst. An seiner Stelle erscheint der Timer: eisblaues Glas, Schneeflocke im Fortschrittsring, „Login eingefroren“, Countdown 00:30 in Monospace. - Gleichzeitig friert die Karte ein: Eiskristalle wachsen per Canvas von den Rändern nach innen (verästelte Linien, 1,4 s), blauer Innenschein, Versuchs-Balken werden eisblau, Button deaktiviert. - Nach Ablauf: Frost schmilzt (ausblenden), der Körper springt federnd zurück, Risse verschwinden, Versuche zurückgesetzt. - Richtiges Passwort: Button wird grün mit Häkchen, „Angemeldet – willkommen zurück!“. - Barrierefreiheit: Statuszeile mit aria-live, prefers-reduced-motion beachten. Hinweis im Code-Kommentar: Die Sperre ist nur die Oberfläche. Echte Begrenzung von Login-Versuchen muss auf dem Server passieren.
Build a login page as a single index.html (HTML, CSS, JavaScript, no libraries, no build step). BACKGROUND - Full-screen background image img/bg.jpg (cover), subtle mouse parallax (max 12 px), dark gradient at the bottom. - The login card sits on the left, vertically centred; on mobile below, full width. GLASS CARD (as premium as possible) - Width 420 px, radius 32 px, padding 30 px. - backdrop-filter: blur(22px) saturate(180%) brightness(1.08); light gradient background (white 18 % → 3 % → 10 %). - Layered shadows: 1 px white inner edge at the top, soft light inner glow top left, large soft drop shadow. - 1.2 px border as a conic-gradient (white, ice blue #9FE7FF, gold #FFB547) via mask-composite, angle follows the mouse. - Sheen: radial-gradient at the mouse position (soft-light) + fine SVG noise. - Slight 3D tilt towards the mouse (max 5°). - Real edge refraction (Chrome/Edge only, otherwise fall back to blur): an SVG filter as backdrop-filter: url(#lens) with feGaussianBlur → feImage → feDisplacementMap (scale 64) → saturate 1.7. Generate the displacement map with a canvas at card size: rounded rectangle, inside a 26 px rim shift pixels inwards (strength quadratic towards the edge), R = x shift, G = y shift, 128 = neutral. Rebuild on resize (ResizeObserver). CONTENT Logo, top right "Attempts" with 3 small bars, heading "Welcome back", subline, email field, password field with eye button, "Sign in" button (orange gradient #FF4F1F → #FFB547), status line, divider "or", "Sign in with passkey" button, "No account yet? Sign up". Font Plus Jakarta Sans. Fields: dark glass inside the glass, focus with a golden ring. THE MECHANIC: 3 attempts, then a time lock - Correct demo password: "knochen". Anything else is a failed attempt. - The password field is two stacked layers with complementary clip-paths: a stub on the left (about 50 px, lock icon) and the body with the input on the right. The split line is jagged (e.g. 50,0 → 44,14 → 53,27 → 46,41 → 51,56 px). Unbroken it looks like one field. - Pivot of the body: at the bottom of the break (transform-origin: 51px 100%). - Failed attempt 1: the body rotates 3° downwards (the top right corner comes loose at an angle), a glowing white crack draws in along the break (SVG, stroke-dashoffset), hairline cracks on the field, small glass shards fall with gravity, the card jolts. - Failed attempt 2: 6.5°, more cracks, more shards. - Failed attempt 3: the body drops a little (translateY 34 px, rotate 10°, accelerating) and fades out. In its place the timer appears: ice-blue glass, a snowflake inside a progress ring, "Login frozen", countdown 00:30 in monospace. - At the same time the card freezes: ice crystals grow from the edges inwards on a canvas (branching lines, 1.4 s), blue inner glow, attempt bars turn ice blue, button disabled. - When it ends: the frost melts (fade out), the body springs back, cracks disappear, attempts reset. - Correct password: button turns green with a check mark, "Signed in – welcome back!". - Accessibility: status line with aria-live, respect prefers-reduced-motion. Add a code comment: the lock is UI only. Real login rate limiting has to happen on the server.
index.html neben den Ordner img speichern und im Browser öffnen.index.html next to the img folder and open it in the browser.Die Animation ist reine Oberfläche. Wenn der Login echte Konten schützt, gehört die Sperre auf den Server (Versuche pro Konto und IP zählen, Sperrzeit dort erzwingen) – die Seite zeigt dann nur an, was der Server zurückmeldet. Sag deiner KI: „Verbinde das Formular mit meinem Backend, die Sperrzeit kommt aus der Antwort.“
The animation is UI only. If the login protects real accounts, the lock belongs on the server (count attempts per account and IP, enforce the lock there) – the page then just shows what the server reports. Tell your AI: "Connect the form to my backend, the lock time comes from the response."
Tipp: Die Lichtbrechung am Rand gibt es nur in Chrome und Edge. Safari und Firefox zeigen automatisch das normale Milchglas – sieht auch gut aus.
Tip: edge refraction only works in Chrome and Edge. Safari and Firefox automatically show the regular frosted glass – still looks great.
Ich baue dir Logins, Formulare und ganze Websites, die man nicht vergisst – mit deiner Marke und echtem Backend.
I build logins, forms and whole websites people remember – with your brand and a real backend.