ClipFlip

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Recreate a mobile-first vertical short-video social feed called “ClipFlip,” in German, using a dark full-screen app shell. On desktop, constrain the app to about 430px wide centered on a black background; on mobile fill the viewport. The main feed is a 100dvh vertically scrollable list with mandatory scroll snapping, where each clip occupies one full screen. Swiping/scrolling upward moves to the next clip; show a temporary bottom hint reading “Wische nach oben für den nächsten Clip.” Each clip should autoplay muted, loop, and pause when it leaves the viewport; use five demo video entries (or equivalent playable sample videos) with these themes and metadata: sunset / mila.moves / M / “🌅 golden hour + ein kleiner dance break ✨” / “#foryou #sunset” / “Originalton · mila.moves” / 12,840 likes, 214 comments, 91 shares; ocean / leo.outside / L / “🌊 Wenn der erste Sprung ins Wasser besser ist als jeder Wecker.” / “#summer #outside” / “Ocean Eyes · remix” / 8,421 likes, 103 comments, 48 shares; lime / snacklab / S / “🍋 3 Zutaten. 1 Minute. Dieser Snack knuspert wirklich.” / “#foodtok #quickhack” / “Crunch Mode · snacklab” / 29,100 likes, 602 comments, 338 shares; violet / nora.beats / N / “🎧 POV: Dein Lieblingssong kommt genau im richtigen Moment.” / “#music #pov” / “Midnight Loop · nora.beats” / 5,632 likes, 77 comments, 20 shares; ice / tom.creates / T / “🧊 Kleine Eiswürfel, große Wirkung. Welcher Look gewinnt?” / “#diy #satisfying” / “Glass & Ice · Original” / 17,654 likes, 321 comments, 112 shares. Videos should be displayed as cover/object-fit backgrounds with a slight saturation/contrast boost, dark gradient shading at the top and especially bottom, plus soft large blurred translucent floating colored orbs and subtle ambient gradients over the video. Use a polished TikTok/Reels-like aesthetic: white bold text, black translucent overlays, neon cyan (#25f4ee) and pink/red (#ff2d55) accents, rounded controls, soft shadows, and light motion on the decorative orbs.

Fixed top bar: centered bold “ClipFlip” wordmark with “Clip” white and “Flip” cyan, and top-right circular translucent buttons for sound (initially muted icon 🔇) and search (⌕), plus a profile button (👤) in the actual header. Each clip’s lower area has left-aligned creator information: circular white/gray gradient avatar with the initial, @username, cyan verification dot, and outlined pill button “Folgen”; below it the caption, hashtags in bold, and a music line prefixed with ♫. On the right lower side place a vertical interaction rail: heart with formatted likes (e.g. 12,8K/13K depending formatting), comments icon “☵” with count, share arrow “↗” with count, and save icon “◈” with label “Speichern.” Add a thin horizontal progress indicator above the bottom edge, with a white animated segment. Use snap scrolling and IntersectionObserver-like behavior so the active clip tracks and play count increments when a clip becomes visible.

Interactions and rules: tapping the heart toggles a liked state, turns it pink, adds/removes one like, and shows a centered transient toast (“Gefällt dir” or “Like entfernt”). Tapping Folgen toggles “Folge ich” and shows a toast. Tapping share attempts to copy the current page URL and shows “Clip-Link kopiert.” Tapping save shows “Für später gespeichert.” Sound toggles between muted and unmuted for videos and changes the top button between 🔇 and 🔊, with toast “Ton an”/“Ton aus.”

Comments: tapping the comment button opens a dark translucent backdrop and bottom sheet with rounded top corners, title “Kommentare · @username,” close button, scrollable comments list, and input placeholder “Kommentar schreiben…” plus pink “Senden” button. If no user comments exist, show the demo comments “@lena Dieser Clip ist stark 🔥” and “@max Mehr davon bitte!” Submitting a max-120-character comment adds it under the current clip using the current profile name and shows “Kommentar veröffentlicht.” Tapping outside the sheet closes it.

Search: tapping the search icon opens a full-screen dark overlay with a centered rounded panel titled “Videos suchen,” close button, input placeholder “Creator, Hashtag oder Thema,” and pink “Suchen” button. Search across username, caption, hashtags, and sound; submit filters the feed, scrolls to the beginning, and shows a toast like “3 Videos gefunden” or “Suche zurückgesetzt.” If no matches remain, show “Keine Videos gefunden” and “Versuche einen anderen Suchbegriff.”

Profile/upload: tapping profile opens a dark translucent bottom sheet titled “Mein Profil,” with close button, gradient cyan/pink circular avatar, @creator initially, stats showing 0 Videos, 128 Follower, 34 Folge ich, and buttons “＋ Video hochladen,” “Profil bearbeiten,” and cyan “Anmelden.” Profile bearbeiten only shows a toast “Profil bearbeiten kommt als Nächstes.” Upload requires login; otherwise close profile, open the login sheet, and show “Bitte zuerst anmelden.” The login overlay is titled “Bei ClipFlip anmelden,” explains “Demo-Login für dein Profil. Die Daten bleiben aktuell nur in diesem Browser.” and has required username, email, password (minimum 4 characters), and “Einloggen.” On success set the profile name, change the button to “Abmelden,” close the overlay, and show “Willkommen, @name.” After login, file upload accepts video/* files, inserts a new violet clip at the top with 🎬, the user’s initial, filename-based caption plus “· mein neuer Clip,” #meinclip #upload, Originalton metadata, zero counts, increments the Videos stat, closes the profile, scrolls to the top, and shows “Video hochgeladen.” Keep all panel transitions as smooth slide-up/fade animations and all styling responsive, touch-friendly, and accessible with normal HTML buttons and inputs.