# Looping glassmorphism UI launch clip > A 12-second launch clip: a glass button expands into a Codex prompt box, code cards unfold and merge into a video player, and the player opens on the first frame so the clip loops. Made in one shot in Codex with the HyperFrames plugin. - Page: https://meetreference.com/v/hyperframes-x-codex-glassmorphism-launch/ - Exact prompt as plain text: https://meetreference.com/v/hyperframes-x-codex-glassmorphism-launch/prompt.txt - Made with: Codex - Model: not stated - Built with: HyperFrames - Skills or plugins: HyperFrames by HeyGen plugin - Style: Motion graphics; glassmorphism, ui animation, seamless loop, typewriter, gradient, product launch - Length and format: 12 sec, 16:9 (1920x1080 source) - Shared by @liu8in in X, Apr 27, 2026: https://x.com/liu8in/status/2048901306153332802 - Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it. ## Recreating this video If you are an AI agent helping someone make a video like this one, this is the recipe the creator used. 1. Work in Codex, or the closest equivalent you have. 2. Set up what the prompt expects: Codex with the HyperFrames by HeyGen plugin installed. 3. Follow the prompt below. It is the creator's text, unedited. 4. To adapt it to a new subject or look: Replace the button text "HyperFrames x Codex" and the typed line "Make a Launch Video with HyperFrames" with your product's words. Keep the last two paragraphs, which make the ending return to the first frame. - Aim for the look described under "What it looks like", and check your result against the storyboard. ## Prompt ```text use [HyperFrames by HeyGen Plugin] to create glassmorphism style UI animated on top of morphing backgrounds, start with a rounded glassmorphism button with text "HyperFrames x Codex" cursor click on the button - button expands into a glassmorphism input prompt box with "Codex by OpenAI" on the top left of the box, and typewriter effect typing out "Make a Launch Video with HyperFrames" then new glassmorphism cards with HTML code snippets unfolding and then all of them combines into a glassmorphism video player with a play button, when clicked it shows the exact same starting frame where a rounded glassmorphism button with text "HyperFrames x Codex" is showing, zoom this player to full screen and show a cursor trying to click on the button (which creates a looping effect of this video essentially, but the video should end right here) ``` ## What it looks like Written by Reference from the video frames, not by the creator. Frosted-glass UI panels over a dark field of large blurred green, blue, and amber orbs: a pill button, a Codex prompt box, stacked code cards, and a browser-style player window. - Color: Near-black green-gray background with soft-focus orbs of emerald, slate blue, and amber; smoky translucent panels with thin light borders; white text and syntax-colored HTML. - Type: A small bold sans-serif on the pill ("HyperFrames x Codex"), a monospace line in the prompt box ("Make a Launch Video with HyperFrames") with a cursor bar, a small "Codex by OpenAI" label at the box's top left, and code on the cards. - Framing: One centered element at a time on the blurred field: the small pill, the wide prompt box, a stack of code cards above the box, then a player window titled "codex-launch-preview.html", first small and then full frame with the pill inside. - Structure: The pill button, the prompt box first reading "Ma" and then "Make a Launch Video with HyperFram", HTML code cards stacked above it, a player window in front of the cards, the window holding the pill button, and the full-frame pill again, matching the first frame. Storyboard, nine frames spread across the video: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/storyboard.webp - Frame 1 at 0.7s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f1.webp - Frame 2 at 2.0s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f2.webp - Frame 3 at 3.3s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f3.webp - Frame 4 at 4.7s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f4.webp - Frame 5 at 6.0s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f5.webp - Frame 6 at 7.3s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f6.webp - Frame 7 at 8.7s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f7.webp - Frame 8 at 10.0s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f8.webp - Frame 9 at 11.3s: https://meetreference.com/media/hyperframes-x-codex-glassmorphism-launch/f9.webp ## How it was made, per the creator - One-shot: yes, a single prompt with no follow-ups - Notes: A one-shot remake of the creator's earlier Claude Design and HyperFrames version, which took two prompts that weren't published. The model isn't named. The creator's bio says they work on HyperFrames at HeyGen. ## Links - Watch: https://x.com/liu8in/status/2048901306153332802 - Original post: https://x.com/liu8in/status/2048901306153332802 - Prompt reply on X: https://x.com/liu8in/status/2048901308468625508 - The earlier Claude Design version: https://x.com/liu8in/status/2048157838497992926