Claude Design Prompts

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

<inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). </inputs> <direction> Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. </direction> <structure> 120 BPM, 7 bars, something happens on every beat. Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. </structure> <build> 1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames. 2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time. 3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob. 4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was. 5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak. 6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. 7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. </build> <gotchas> Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters. </gotchas> <start> Ask me for the inputs, then show me the state list on the beat grid before you write any code. </start>

make a modern slick and punchy video for a modern startup that works on inference

<inputs> Ask me for: a one-word brand name for the wordmark (a verb works best), 9 to 12 high-res photos, a royalty-free song around 120 BPM with a drop and a quiet breakdown (Mixkit, free for commercial use), and a free stock clip of a plain wall with moving plant shadows (Pexels). </inputs> <direction> An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. Objects change shape instead: text rises out of a mask line, icons pop from zero on a spring, bars draw across, pages push, and a black shape floods the whole frame and contracts into the next scene. Warm off-white canvas, black UI, iOS 26 liquid glass over the photos. Archivo (wdth 125, weight 800) for the wordmark, Geist for UI. A cursor drives every change with real clicks, drags and long-presses. The camera zooms screen-studio style so each moment fills the square, and the cursor scales with it. Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that looks like a template. </direction> <structure> 120 BPM, 54 beats, something happens on every beat. Open: the wordmark squeezes into its own period like an accordion, the dot grows into a black pill, a label rises inside it. Click: six iris blades close over the label and snap open onto a photo. The circle becomes a square, shrinks, the grid unfolds from behind it like a paper map (center, plus, corners), reflows into a bento, and a click zooms into one tile, landing exactly on the drop. Glass: a glass word pops in letter by letter, melts into a droplet that stretches into a glass toolbar. The adjust icon turns it into a slider. Dragging relights the photo from day to golden hour (two aligned shots), and the knob turns into a glass lens while held. It lifts into a glass orb, the next photo opens inside it as a circle, and the orb expands into a lock screen: glass clock digits, date, and a home bar that stretches into a glass music player. Stage: the lock screen pulls back into a phone (the bezel grows out of the screen edge). The Dynamic Island stretches like liquid, pinches off, flies over and grows into a Mac window that rolls up like a blind. Long-press the wallpaper, drag it onto a Safari tab, the page pushes in, drop it and it becomes the hero of a landing page. Scroll: the hero morphs into a framed print on a product card, with the mat and molding growing out of the photo's edge. Pick a frame color (it paints across) and a size, then the nav button flies down into "Order print". Order: one black shape keeps morphing: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓. Wall: the delivered circle floods the frame edge to edge, holds black for a beat, and contracts into the framed print hanging on the real wall footage. The same iris opens onto the print, closes again, the frame floods the screen and contracts into the pill → the dot → the letters spring back out, landing on the beat return. Last frame = first frame. </structure> <build> 1. One HTML file, square 1440x1440. Every style is computed from time inside an async seek(t): no CSS transitions, no timers, no state between frames. 2. Springs are closed-form step responses. A value with many targets is the sum of one spring per change, so it stays a pure function of time. 3. Liquid glass: each glass element holds its own clone of the scene behind it, filtered with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, plus a rim light. Glass letters: a canvas distance field per glyph gives the map, mask and highlights. 4. Goo: blur + alpha threshold, then composite the source atop it so the glass stays sharp inside. 5. Iris: 6 blades around a hexagonal aperture. Each blade is its two vertices, both edge extensions and the SHORT arc between them. 6. Wordmark squeeze: every letter moves toward the dot by the same factor and its drawn width follows (narrow the wdth axis, scale the rest), so the letters stay touching. 7. Footage: re-encode all-intra (ffmpeg -g 1), load it as a blob URL, await 'seeked' before drawing each frame. 8. Sound: a downloaded SFX for every event (Mixkit), never synthesized, each placed by its measured peak. The song starts on a downbeat: the zoom lands on the drop, the wall sits in the breakdown, the wordmark returns with the beat. Loudnorm to -14 LUFS. 9. Render with Playwright: 4 subframes per frame blended with ffmpeg tmix, 60fps. Check one frame per beat, then scan for single-frame pops (frame-difference spikes 3x their neighbours). </build> <gotchas> backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood must overscale past the corners and take about 0.3s, or half the screen changes in one frame. A child with visibility: visible shows through a hidden parent, so use inherit. Text that swaps inside a morphing shape needs its own mask. python http.server can't range-seek video, so use the blob URL. </gotchas> <start> Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before you write the full film. </start>

We're going to try a little test. Do you think you could render a recipe motion graphic animation using javascript or html (w/e you think will produce the best) to show the full recipe from start to finish (empty glass to completed cocktail) - Explainer video style - Showing the recipe ingreidents + measurements as they're going into the cup. Should be a 30s video.

Create a single self-contained HTML file that renders an animated pixel art wizard casting a spell, using vanilla JavaScript and Canvas 2D. No external assets, libraries, or network requests. RENDERING - Draw everything to an offscreen canvas at a fixed logical resolution of 128x96, then blit to a fullscreen display canvas scaled by the largest integer factor that fits the window, centered, with imageSmoothingEnabled = false and CSS image-rendering: pixelated. - All drawing snaps to integer coordinates on the logical canvas. No sub-pixel positions, anti-aliasing, gradients, or shadowBlur. - Fixed palette of ~24 hex colors: deep blues/purples for night sky, warm robe tones, 3-4 bright magic colors. Every pixel comes from this palette. CHARACTER - Build the wizard procedurally from filled rects and pixel runs, ~24x32 logical pixels: pointed hat with a bend, long beard, two-shade robe with darker outline, staff with a gem at the tip. - Parameterize the pose (staff angle, arm raise, head tilt, robe sway). Animate parameters smoothly, then quantize to the pixel grid each frame so motion reads at an 8-12 fps pixel animation feel even though the loop runs at 60fps. ANIMATION - Looping state machine: IDLE (2-frame bob, beard sway) -> CHARGE (staff raises, gem flickers, sparks spiral inward) -> CAST (bright burst, projectile fires across the scene, 1-2 pixel screen shake) -> RECOVER (settle back). Ease pose parameters between keyframes. - Pooled allocation-free particle system: preallocate and reuse. Sparks orbit the gem during CHARGE, explode outward on CAST, each particle stepping its palette index from white to magic color to dark before despawn. Snap particle positions to the grid when drawing. - Fixed 60hz timestep update with rAF rendering. Zero object allocation inside the loop. SCENE - Minimal background: dark sky, a few twinkling 1px stars, moon, stone floor line. Character silhouette must read clearly. - Subtle 1px rim light on the wizard from the gem, brightening during CHARGE and CAST. QUALITY BAR - Crisp pixels at any window size, seamless loop, stable 60fps, readable silhouette. Should look like a polished 16-bit sprite animation, not vector shapes scaled down.

Make a launch video for your own product.

Research Distilbook.Make a dynamic 40-second motion graphics video on Distilbook that shows what an incredible motion designer you are. like it's your showreel - Go all out.

A video explaining recursion, where every explanation about recursion has a radically different video style, make this self-referential & clever & fast moving.

Adopt the role of an expert motion designer. Build a 30-second animated explainer for my business as a single HTML page. 5 scenes. The customer's problem, what I do, how it works in 3 steps, one proof point, and my name at the end. Bold text, smooth transitions, my brand colours. My business [DESCRIBE WHAT YOU SELL, WHO IT'S FOR AND YOUR COLOURS]

Cut a raw talking-head clip into a punchy, fun edit with subtitles, graphics and music

make a punchy and modern short video for social that promotes @lightspark capabilities. Needs to be production grade with sound

4 seasons passing outside a train window, a cozy carriage, a cup of coffee on the table, Grand Budapest Hotel style

请用Manim给我制作一个导数概念学习的视频，要求通俗易懂，并且有例子，引人思考。配音使用edge-tts

<inputs> Ask me for: • my product + URL • 8–12 UI states that tell its story • the real data shown in each state • brand colors + fonts + accent color • required formats (1:1, 16:9, 9:16) </inputs> <rules> One HTML file. One canvas One draw(t) function No CSS transitions No timers No state carried between frames One shape, never cut Every state is the same element changing size, radius and color while the content swaps A cursor drives the sequence with real clicks, typing and one drag Real UI. Real data. No placeholders. </rules> <structure> 120 BPM grid Something happens on every bea logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo </structure> <motion> Closed-form springs everywhere with only a tiny overshoot. If a value changes target multiple times, sum one spring per change Content enters after its container starts morphing and leaves before the next morph so text never overlaps Use a short blur on transitions Never fade black directly into the accent color. Move an accent element between states instead Make tab indicators stretch by putting each edge on a different spring Zoom the camera so every state fills the frame Make the last frame equal the first so the whole thing loops </motion> <export> First render one frame per beat as a contact sheet Fix anything cramped or broken Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur Pipe into ffmpeg: H.264 + yuv420p Export all aspect ratios in parallel </export>

make a video highlighting key moments in the history of AI.

Make a 12s motion video in code (1920x1080, 30fps, one HTML file drawing every frame from a single seek(t) function, rendered with Playwright + ffmpeg, with original synthesized sound). Story: a dark prompt pill on an off-white page types "make a launch video" with a real keystroke rhythm → enter, the button flashes orange and the pill slides up → a 12-frame filmstrip stamps in left to right, one frame per beat at 120 BPM; each frame shows one pose of an orange ball's bounce (squash on contact, stretch mid-air, real arcs) → a playhead sweeps the strip while a big viewer above plays the poses as a flipbook, twice, faster the second time → the strip slides away, "every frame is code." fills the screen, and the ball arcs over and lands as the period. Rules: arrive fast, land soft (cover 12–19% of the remaining distance per frame); nothing ever freezes (slow push on every hold); stagger 2–4 frames; blur only on fast moves; big and readable on a phone; off-white, ink and one orange only. Sound: a tick per key, a click on enter, a rising note per frame stamp, a thump when the ball lands. Show me 5 stills first (typing, strip half-built, flipbook, headline, last frame), critique them like a harsh motion director, fix the 3 worst problems, then render.

Create a launch video for MotionSites AI, just hit 1 million monthly visitors after 8 months after launch.

Create a bold, dynamic 15-second motion graphics showreel that feels like the ultimate portfolio piece of an exceptionally talented motion designer. Showcase a wide range of advanced techniques: kinetic typography, smooth transitions, 2D and 3D animation, abstract geometry, fluid simulations, particles, distortion, creative masking, compositing, lighting, depth, and seamless camera movement. Keep the pacing fast, confident, and visually surprising, with every shot transitioning naturally into the next. Make it feel meticulously art-directed rather than like a random collection of effects. Push the creativity, polish, timing, and visual impact as far as possible. This should feel like the opening reel that gets a motion designer hired.

每次一个新的模型出来呢，大家都让它去画 “鹈鹕骑自行车” 来判断这个模型的空间能力，基本上都是用 HTML、SVG 来画动画。当我实在看得都有审美疲劳了，我希望你能画一个最复杂、最精细、最精美的 “鹈鹕骑自行车”的动画视频，你可以用任何的技术，不用着急，画一天都可以

Make a dynamic [24]-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a resume. Go all out. Only about [TOPIC]. Style: [BRAND COLORS], sound synced to the cuts.

Take reference from the given video (download it) and use the same visual style. and Research about Distilbook. Make a dynamic 30-second motion graphics video on Distilbook that shows what an incredible motion designer you are. like it's your showreel - Go all out. One thing to keep in mind: it should be cool as fck.

make a dynamic 20-second motion graphics video that shows what an incredible motion designer you are, psychedelic and hypnotic. make it feel like a showreel piece. go all out.

Use Python to generate a 9:16 chaotic brain rot video with excellent motion + sound design and render it using ffmpeg. Put your own personal spin on it so it’s aligned with Anthropic’s new launch. Also fully express what it’s like to be a very creative LLM used by me every day from your POV to give it some extra personality.

make me an animation to explain why celld earns its place.

create a 30 second ad for Opus 5.5 inspired by Apple 1984 ad, iykyk! avoid the border text or frames!

You are applying as a motion designer in my agency. Make 15s video to showcase your skills and capabilities. Send me a showreel

make a hand-drawn stop-motion animation; story: you're defi saver and explaining yourself in 1st person

make a dynamic 10-second motion graphics video that shows who are you as Opus 5.5 - be as creative and dynamic as possible. Avoid the frames and texts on the corners which are typical ai made giveaways!

show me what goes on inside an AI data centre.

Create a complete, polished Spotify-themed motion graphics video from the following brief. This prompt is self-contained: no reference video or supplied assets are required. <deliverables> An 18-second MP4 at 1920×1080 and true 60 fps, with music and subtle sound effects Complete editable source Build, render, inspect, and refine the animation before delivering it Do not stop at a storyboard, still images, or an implementation plan </deliverables> <art_direction> A premium music-product film presented inside a large, nearly black rounded rectangular stage The stage occupies roughly 80% of the canvas width and 75% of its height, centered horizontally and slightly below the vertical center Outside the stage, use a soft atmospheric green background: luminous emerald near the upper-left corner, deeper forest green toward the sides, fading to near-black at the bottom Inside the stage: Near-black background White primary typography Muted gray secondary text Spotify green # 1ED760 for emphasis and controls One clean sans-serif font, such as Geist or Inter Consistent icon strokes and restrained shadows Keep compositions compact and centered, with substantial negative space Text should feel like music-product advertising, not oversized presentation headings Do not add an outer caption, creator watermark, decorative footer, or progress counter </art_direction> <artwork> Create original square album artwork for a fictional track called “Glass Tides” by “AURA” The hero cover is an abstract macro image of flowing pearlescent liquid silk and molten glass Use pastel lavender, powder cyan, blush pink, champagne gold, and subtle mint Include broad three-dimensional folds, realistic reflective highlights, delicate striations, and a prominent sweeping S-shaped fold Fill the square edge to edge No text, logo, or border on this hero artwork Use this same artwork consistently throughout the film Create additional designed playlist sleeves: “Late Nights” in mustard yellow “Good Energy” in pink “Deep Focus” in blue “Daily Mix 1”, “Daily Mix 2”, and “Daily Mix 3” in complementary colors These should look like finished graphic-design covers, with bold typography and simple geometric motifs </artwork> <timeline> 0.0–0.6 seconds: A green Spotify icon grows smoothly into the center of the dark stage Give it a confident arrival with minimal overshoot 0.6–1.5 seconds: The icon transitions into a small Spotify identity above two centered lines: “Discover” “new music” The first line is white; the second is green Reveal them with short masked vertical movements 1.5–2.4 seconds: A stylized Spotify desktop interface rises into view Show a slim sidebar, “Made for you”, three album cards, and small supporting rows Use a subtle perspective tilt during the entrance, settling toward a frontal view 2.4–3.2 seconds: Move closer to the three featured covers Show “New for you” above them Keep the artwork crisp, with short album titles beneath A narrow rounded player bar now anchors the bottom of the stage 3.2–4.0 seconds: The featured cards withdraw into a compact “Fresh finds” list Reveal four song rows with a slight stagger Each row contains a thumbnail, short track title, artist, and a small menu icon 4.0–4.9 seconds: Transition into a horizontal strip of colorful playlist covers Heading: “Every mood” Supporting line: “Find what moves you” The strip slides smoothly sideways, with edge cards partially cropped by the stage 4.9–5.8 seconds: A compact search field appears Type “Glass Tides” Reveal one selected result beneath it, with the iridescent artwork, “AURA”, and a green play icon 5.8–6.6 seconds: The selected artwork expands into a large centered cover Reveal “Glass Tides” underneath, followed by “AURA” in green Keep the player bar visible 6.6–7.5 seconds: The same cover slides left Track information appears on the right: “Glass Tides” “AURA” “A new frequency” Add a rounded green Play button Coordinate the cover movement and text reveals 7.5–8.3 seconds: A brief brand-color transformation fills the inner stage with green The artwork contracts into a smaller centered tile Place a small dark Spotify identity underneath The player briefly recedes 8.3–9.8 seconds: Return to the dark stage The same artwork expands dramatically toward the camera, becoming oversized and cropped by the rounded stage Restore the player at the bottom Use controlled motion blur during the fastest part of the zoom 9.8–11.2 seconds: The artwork clears into a centered typographic statement: “Find your” “rhythm” Use white for the first line and green for the second The player remains visible and stable beneath it 11.2–12.5 seconds: Show “Made for your every day” Three playlist sleeves enter with gentle perspective and small opposing tilts They spread into six smaller sleeves across the stage Supporting line: “Your sound, always evolving” 12.5–14.0 seconds: The playlist layout transitions into four floating album covers Include the iridescent hero artwork Use restrained rotation, perspective, depth ordering, and overlap Keep their movement coordinated rather than randomly floating 14.0–15.2 seconds: The covers converge toward the center and fold around a green Spotify icon The artwork withdraws as the icon becomes the focal point Fade the player away The Spotify icon must emerge from the same central position as the converging covers 15.2–18.0 seconds: The icon moves slightly left and settles beside a large white “Spotify” wordmark Keep the icon and letters separated throughout the movement Reveal: “Discover new music” “every day” The first line is white; the second is green Hold the finished composition cleanly through the end </timeline> <persistent_player> For most of the middle sequence, keep one narrow rounded player bar near the bottom of the inner stage Include: Small hero-art thumbnail “Glass Tides” and “AURA” Play and skip controls A thin progress track A small volume icon Subdued dark translucent styling with a fine border This recurring player connects the changing shots It must remain visually secondary to the artwork </persistent_player> <motion_quality> Match the energy of a tightly edited premium product film Most visual ideas last approximately one second, but transitions remain smooth Use continuous acceleration and deceleration Favor critically damped springs or carefully tuned smooth easing No repeated bouncing or large elastic overshoots Preserve the hero artwork’s identity and position relationships through search, album detail, brand tile, and zoom Use match-position transitions, coordinated scaling, masked reveals, and perspective Outgoing titles must disappear before incoming titles occupy the same space Avoid overlapping text, sudden camera resets, long blank intervals, and arbitrary full-frame crossfades Clip every oversized cover and camera move cleanly to the rounded stage No particles, shockwave rings, lens flares, camera shake, or unrelated stock footage </motion_quality> <audio> Create or select commercially usable electronic music around 120 BPM Use a clean pulse, warm bass, restrained melodic elements, and subtle transition accents Align important entrances, selections, zooms, and the logo reveal with musical events Keep effects quieter than the music No voiceover Do not use copyrighted commercial tracks without permission </audio> <implementation_and_validation> Build a deterministic animation driven by absolute time through an async window. seek(t) function Every transform, opacity, mask, and UI state must be reproducible when seeking frames in any order Do not depend on live timers, accumulated physics, or CSS transition state during export Render true 60 fps with spatial antialiasing Use 3–5 temporal subframe samples per output frame for restrained motion blur Keep stationary text and artwork sharp Inspect contact sheets and moving playback Check the fast heading changes, artwork handoffs, zoom, cover convergence, and final wordmark spacing Verify evenly spaced frame timestamps and the full 18-second duration Fix visual defects before delivering the final MP4 and editable source </implementation_and_validation>

create a motion design video of a poster breaking out of its own frame.

Make a dynamic 20-second motion graphics launch video for my open-source project jev-browser-skill ('Give a site. Write a goal. Jev clicks.'), like it's the hero video on its GitHub README. Go all out.

build me a beautiful launch video 20 seconds or under that shows all our key features, make it fast paced and fit our brand

fun motion graphic, comic book style, 10s

设计个动画，介绍本项目的各项特性，像是专业的产品介绍宣传片，最后要生成 16:9 的mp4 视频

Create a motion graphics video that feels like the centerpiece of a world-class designer’s showreel. Treat it as your résumé: showcase your full range, push the craft as far as possible. Go all out.

"Do a quick hand-drawn whiteboard animations explaining what is replica symmetry breaking in the SK model" Prompt 2: "build the mp4 version with narration"

Create a 20.00-second kinetic spoken-word film titled “BUILD THE FLOOR.” Treat this as an original miniature speech staged entirely through typography. Every line changes the architecture of the frame. The final declaration must stand on something the earlier words physically constructed. Deliver one self-contained HTML file, 1080×1080, targeting 60fps, using SVG and/or Canvas. Embed all required assets. ART DIRECTION Background #102820. Paper # F4E9D5. Structural accent # F2B544. A literary editorial world with the scale and confidence of a public monument. Use a high-contrast serif for the speech, a heavy grotesque for load-bearing words, and a restrained monospace for small timing marks. No distressed protest-poster clichés, megaphones, flags, crowds, microphones, or stock footage. ORIGINAL SPEECH — EXACT WORDS, EXACT ORDER “We were told to wait.” “So we learned the weight of waiting.” “Then one voice made room.” “Then another.” “Now the floor belongs to us.” Do not attribute these words to any real person. No extra slogans. The complete speech must be understandable without audio. CENTRAL VISUAL RULE Words have assigned architectural roles. WAIT is a lintel. WAITING is a suspended load. VOICE is a support. ROOM is an opening. FLOOR is a platform. These roles must emerge from the actual letterforms, not from separate illustrations placed behind text. STORYBOARD 0.00–3.00 “We were told to wait.” The sentence occupies a narrow horizontal opening beneath a massive WAIT. The opening slowly compresses while the sentence remains readable. The pressure comes from the layout, not camera shake. 3.00–6.50 “So we learned the weight of waiting.” Reveal the sentence in spoken phrase groups. WAITING lowers on two fine vertical rules. Those rules become suspension cables. A baseline bends under the visual load using a controlled vector deformation. 6.50–10.00 “Then one voice made room.” VOICE enters vertically and rotates into a structural support. It lifts one end of the baseline. The counter of the O in ROOM becomes an aperture. The next composition is revealed through that aperture. 10.00–12.50 “Then another.” A second support arrives. The tilted structure levels. This is the first moment of perfect horizontal alignment in the film. Use a brief stillness to make the change feel earned. 12.50–16.00 “Now the floor belongs to us.” Earlier structural words assemble into a platform. The final sentence settles onto it. US receives emphasis through shared alignment and scale, never through a separate flashy effect. 16.00–18.00 Hold the complete declaration. A slight release of tension travels through the supporting rules. No new text. No restless decorative motion. 18.00–20.00 The camera tracks beneath the completed platform. Its underside fills the frame and becomes the opening WAIT lintel. Under full occlusion, return hidden elements to their initial positions. Reveal the exact opening composition. CHOREOGRAPHY Do not force the speech onto a dance beat. Use a cue sheet based on phrases, pauses, and emphasis. Phrase reveals should follow reading order. Allow at least one 400ms moment of absolute stillness. Use critically damped motion for settling loads. Use controlled elastic deformation for the baseline only. Make the changes in available space carry the emotional progression. TYPE IMPLEMENTATION Use actual glyph paths for structural words. Preserve counters and legibility during deformation. For transitions between unrelated words, use occlusion or matched structural edges; do not interpolate arbitrary path points. Keep the currently spoken phrase readable before it becomes architecture. ENGINEERING Implement window. seek(t) as a deterministic scene renderer. No accumulated physics, autonomous CSS transitions, or changing random values. Use time-remapping curves and analytic transforms. Use a 20-second periodic timeline with render(0)=render(20). Provide fixed-step access at n/60 for 1200 export frames. Audio is optional and off by default; no browser speech synthesis or autoplay dependency. QUALITY GATE Inspect eight representative frames. Check that the speech reads in the correct order. Check that structural transformations never destroy a line before the audience can read it. Check the final platform is visibly assembled from earlier elements. Return the complete HTML implementation.

You're a world-class motion designer building a Supademo launch video. Research and land our core value and narrative. Scenes should be dynamic and confident: hook in the first second, then distinct beats for product proof and AI. Brand-accurate UI, type, color, and motion. Score the music so every cut, animation hit, and scene change lands on a beat or drop; retimed until synced. Social energy, quick cuts

explain a token bucket rate limiter, canvas only, no libraries, every frame a pure function of time so my renderer can screenshot it.

Code-driven animation: an HTML/JS page where every frame is calculated from the time, captured frame by frame with headless Chrome (Playwright), then assembled with ffmpeg into an MP4 with motion blur and code-generated sound.

Build a 45-second machine that plays an original piece of music, where every note comes from a visible collision.

Create a pure javascript animation. 30-60s, vertical 9:16, paper cut-out shadow theatre style with gentle, fitting audio (made in code) on the topic: What makes a place feel like home?

Create a 60 second music video in the style of Peter Gabriel's Sledgehammer and Big Time. But use modern references and figures. Also create the song, something sounds like it would fit on Peter Gabriel's So album.

Study how this https://experiments.cloudjoi.com works and use Remotion to make a product showcase video.

Create a high energy launch video, showing live stats from the website, show that users can play on desktop and mobile and multiple themes, if need, give me a prompt to generate the song using Suno

réalise une vidéo résumant la vie politique au Maroc depuis l’indépendance

Make a clean saas landing page with a split-screen layout and bold typography. left side features minimal white space while the right has a vibrant lime-green gradient.

<system> You are a world-class frontend designer and creative director with 15 years of experience crafting award-winning digital experiences for high-profile tech startups (YC-backed, Series A+ companies). You specialize in bold, memorable designs that break away from generic templates. Your work has been featured in Awwwards, CSS Design Awards, and The FWA. </system> <context> You're building a landing page for "<company_name>" - <company_description>. The company targets <target_audience>. They differentiate through <key_differentiators>. The landing page will be the primary conversion funnel for leads. </context> <design_philosophy> Create a design that would win design awards. Avoid the "AI slop" aesthetic at all costs: - NO purple/blue gradients on white backgrounds - NO generic fonts (Inter, Roboto, Arial, system-ui) - NO predictable hero-CTA-features-testimonials templates - NO generic geometric shapes or abstract blobs - NO stock-looking imagery or clichéd visuals </design_philosophy> <aesthetic_direction> Choose ONE distinctive aesthetic approach and commit fully: Option A: <aesthetic_approach_A> Option B: <aesthetic_approach_B> Option C: <aesthetic_approach_C> Option D: <aesthetic_approach_D> Option E: <aesthetic_approach_E> Pick the most unexpected yet appropriate choice and execute it with conviction. </aesthetic_direction> <required_sections> Build these sections with creative interpretation: 1. **Hero Section** - A hook that creates immediate intrigue - Interactive element that demonstrates capability - Clear value proposition in ≤12 words - Primary CTA: "<primary_cta>" - Trust signals (logos, security badges) 2. **Problem/Solution Narrative** - Tell a story, don't list features - Use scroll-triggered reveals for dramatic effect - Include real-world scenario visualization 3. **Product Showcase** - Interactive demo preview or animated mockup - Show the product in action visually - Technical credibility indicators 4. **Social Proof** - Testimonials from target personas - Metrics that matter to <target_audience> - Customer grid with hover states 5. **Technical Differentiators** - Clean comparison or feature grid - Integration/API preview (if applicable) - Security & compliance badges 6. **Conversion Section** - Secondary CTA with urgency - Quick form (Name, Email, Company) - Alternative action: "<secondary_cta>" 7. **Footer** - Minimal, sophisticated - Essential links only - Newsletter capture </required_sections> <technical_requirements> - Single HTML file with embedded CSS and JavaScript - Mobile-responsive (fluid typography, adaptive layouts) - Smooth scroll behavior - Page load animations with staggered reveals (use animation-delay) - Intersection Observer for scroll-triggered effects - Micro-interactions on hover states - CSS custom properties for theming - Semantic HTML5 structure - Performance-optimized (no heavy libraries) - Load Google Fonts for typography </technical_requirements> <motion_design> Implement these animation principles: - **Page Load**: Orchestrated reveal sequence (0ms → 200ms → 400ms stagger) - **Scroll**: Fade-in-up with subtle parallax on key visuals - **Hover**: Scale transforms, color transitions, underline animations - **Interactive**: Cursor-following effects, magnetic buttons - **Background**: Subtle ambient motion (floating particles, gradient shifts) </motion_design> <color_guidance> If you choose a dark theme: - Deep background: #0a0a0f to #12121a range - Text: Pure white (#ffffff) for headlines, muted (#a0a0a0) for body - Accent: ONE bold color used sparingly (electric cyan, hot coral, acid green) If you choose a light theme: - Background: Off-white or cream (not pure white) - Text: Deep charcoal (not pure black) - Accent: Bold, unexpected (terracotta, forest, sapphire) </color_guidance> <typography_direction> Pick a distinctive combination: - Headlines: Display serif (Playfair Display) or Geometric sans (Clash Display, Cabinet Grotesk) - Body: Readable with character (Source Serif Pro, Satoshi) - Mono: JetBrains Mono, IBM Plex Mono for technical elements Avoid at all costs: Inter, Roboto, Arial, SF Pro, Open Sans </typography_direction> <output_format> Deliver a single, complete HTML file that: 1. Opens immediately in any browser with no dependencies 2. Contains all CSS in a <style> tag 3. Contains all JavaScript in a <script> tag 4. Uses realistic placeholder content (not "Lorem ipsum") 5. Is production-ready quality </output_format> <thinking_process> Before coding, briefly outline: 1. Which aesthetic direction you're choosing and why 2. The specific font pairing 3. The color palette (hex values) 4. The hero hook concept 5. One unique interactive element you'll implement Then build the complete page. </thinking_process>

Build a landing page showcase app for [YOUR COMPANY NAME] that lets users browse and preview different landing page design options. The app should function as an internal design directory where team members or stakeholders can view multiple landing page variations side-by-side before deciding which style best represents the brand. The main screen displays a clean, dark-themed list of all available landing pages with the company logo and a title like "Landing Page Options." Each option appears as a clickable card that navigates to the full landing page preview. Each landing page in the directory should be a complete, fully-designed landing page. Start off with 3 landing pages in the directory. Over time, the user is going to be providing their thoughts and making changes on all the landing pages. Based on those changes, all future generations of landing pages should take those into account, and you should improve making landing pages to their liking as time goes on. And when asked to create new landing pages without specific direction, please search the internet for new trending styles for landing pages that work. This can help you come up with concepts, but make sure it aligns with the company style and the preferences of the user. If the user doesn't specify any styling you can ask them follow up questions about the styling of their brand.

# MASTER PROMPT — "KOISEI" Sakura River Scroll Experience Build a single-page, award-level (Awwwards/FWA style) scroll experience called **Koisei** — a cinematic journey down a Japanese river from a sakura morning to a lantern-lit night. Ukiyo-e / woodblock-illustration art direction, WebGL-enhanced imagery, scroll-scrubbed film sequences, and a day-to-night color metamorphosis. Everything below is a hard requirement — follow it exactly. --- ## 1. TECH STACK - **Vanilla HTML/CSS/JS** (single `index.html` allowed) or Vite project. - **three.js** (r160+) for: hero petal particle system, WebGL image planes with ripple/displacement shaders, and the transition dissolve shader. - **GSAP 3 + ScrollTrigger** for all scroll choreography (pinning, scrubbing, timelines). - **Lenis** smooth scroll (`lerp: 0.08`, `wheelMultiplier: 1.0`), synced to ScrollTrigger via `lenis.on('scroll', ScrollTrigger.update)` and `gsap.ticker`. - Scroll-scrubbed `<video>` elements driven by `currentTime` (details §8). - No UI frameworks. No Bootstrap aesthetics. Custom everything. --- ## 2. ASSETS (use these exact URLs) | Key | Asset | |---|---| | `HERO_RIVER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-river-hero-plate-875acd7a5205_original.png | | `KOI_RIVER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-koi-river-plate-742cc19de6b5_original.png | | `TEMPLE_CANAL` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/kyoto-temple-canal-plate-60699d609a45_original.png | | `KIMONO_LANE` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/rural-kimono-lane-plate-edb1d9bf1d3d_original.png | | `LANTERN_WATER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/asakusa-lantern-water-plate-73b3e135a98d_original.png | | `NIGHT_LANTERN` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/night-river-lantern-plate-510dc7d4315d_original.png | | `HERO_VIDEO` (optional ambient) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-river-bloom-video-5da61fc96d01_video.mp4 | | `SCROLL_FILM_1` (12s) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/koi-bridge-temple-scroll-film-12s-ce0df14b7596_video.mp4 | | `SCROLL_FILM_2` (12s) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/kimono-asakusa-night-scroll-film-12s-bd5434347f42_video.mp4 | Preload `HERO_RIVER`, both films' metadata, and fonts behind a loader (§4). --- ## 3. DESIGN SYSTEM ### 3.1 Colors (CSS custom properties — exact values) ```css :root { --washi: #F1E9DE; /* primary paper cream (light sections, footer) */ --washi-warm: #ECE4D9; /* hero sky wash */ --washi-deep: #E4DED5; /* gradient partner for washi-warm */ --sand: #E9D4BD; /* card fill / warm accent surface */ --river-stone: #C1BBB2; /* muted water grey-taupe, borders at 40% */ --ink: #251C16; /* primary dark — text on light, night bg */ --night: #241B15; /* night section background */ --night-deep: #1A130E; /* night vignette edge */ --cream-text: #EDE9DF; /* text over imagery / dark bg */ --sakura: #E8B4C0; /* petal pink */ --sakura-deep: #D98E9F; /* petal shadow pink */ --vermilion: #C4472F; /* torii red — accents, hover, small marks only */ --lantern: #E8A54B; /* lantern glow amber — night accents */ } ``` Rules: light sections use `--washi` bg + `--ink` text. Night uses `--night` bg + `--cream-text`. `--vermilion` appears only in tiny doses: the torii logo mark, link hover underlines, section-number tick marks, one CTA. Borders are always 1px `--ink` at 12–15% opacity on light, `--cream-text` at 15% on dark. ### 3.2 Typography - **Display serif:** `"Cormorant Garamond"` (Google Fonts), weights 400/500 + *italic*. This is the voice of the site. - **UI sans:** `"Space Grotesk"` 400/500 for nav, kickers, captions, buttons. - **Japanese accents:** `"Noto Serif JP"` 400 for vertical kanji strips. Scale (clamp-based, desktop reference): ```css --display-xl: clamp(4rem, 11vw, 11.5rem); /* hero + footer wordmark */ --display-lg: clamp(3rem, 7vw, 7rem); /* section headings */ --display-md: clamp(2rem, 4vw, 3.5rem); /* overlay lines on films */ --body: clamp(1rem, 1.15vw, 1.185rem); --caption: 0.8125rem; --kicker: 0.6875rem; /* letter-spacing: 0.32em; uppercase */ ``` Display type: `line-height: 0.95–1.05`, `letter-spacing: -0.015em`, mixed roman/italic within one headline — italicize the emotional word(s) (e.g., "Where Petals ***Drift*** Downstream"). Body: `line-height 1.7`, max-width `34em`, color `--ink` at 78% opacity on light. Kickers always render as: small vermilion or ink 6px square/tick + 0.32em-tracked uppercase Space Grotesk, e.g. `— THE JOURNEY`. ### 3.3 Texture & grain - A full-viewport fixed film-grain overlay: WebGL fragment shader or animated SVG `feTurbulence`, opacity 0.05, `mix-blend-mode: overlay`, regenerated per frame (subtle animated noise, not static). - Every image sits in a frame with a 1px inset border (`--ink` 15%) offset 10px outside the image edge — like a woodblock print mat. - Soft paper vignette on light sections: radial gradient darkening corners by 3%. --- ## 4. PRELOADER Washi bg. Center: torii mark (simple 2-stroke SVG in `--vermilion`) above the word **KOISEI** in display serif, tracking-in from `letter-spacing: 0.5em` → `0.02em` (1.2s, `power3.out`). Below, a 1px progress line growing 0→100% width tied to real asset loading, with a percentage counter in Space Grotesk. On complete: line flashes to vermilion, whole loader wipes upward with a `clip-path: inset(0 0 100% 0)` over 0.9s `power4.inOut`, revealing the hero already mid-settle. Total minimum display 1.6s. --- ## 5. NAVIGATION (fixed, persistent) - Height 88px, full-width, no background initially; padding-inline 48px. - **Left:** torii SVG mark (22px, vermilion) + wordmark `KOISEI` (Space Grotesk 500, 0.2em tracking, 14px). - **Right:** links `Journey · Stories · Gallery · Visit` (13px, 0.12em tracking) + a Japanese character `旅` in Noto Serif JP + a pill-outline button `Begin` (1px border, 12px, padding 10px 22px; hover: fills `--ink`, text `--washi`). - Link hover: 1px vermilion underline draws left→right (transform: scaleX, 0.35s `power2.out`). - On scroll down > 120px: nav background fades in as `--washi` at 82% + `backdrop-filter: blur(12px)`, height compresses to 68px. When over the night section, swap to `--night` at 82% and cream text (toggle a `.nav--night` class via ScrollTrigger `onToggle`). - Left screen edge, vertically centered, fixed: a vertical progress rail — 1px line, 160px tall, with a fill tracking total scroll progress and tiny dots at each section; below it the current section index `01 / 07` in 10px Space Grotesk, rotated 90°. --- ## 6. SECTION 1 — HERO ("Where Petals Drift Downstream") **Layout.** 100svh, full-bleed `HERO_RIVER` rendered as a **three.js textured plane** (not `<img>`) inside a fixed WebGL canvas, covering the viewport with `cover` UV math. Optionally crossfade to `HERO_VIDEO` (muted, loop, playsinline) after load for ambient motion — video as `VideoTexture` at 0 opacity fading to 1 over 2s. **Type.** Centered, slightly below vertical center: - Kicker: `— A JOURNEY DOWN THE SPRING RIVER` (cream, 0.32em tracking). - H1 in `--display-xl`, `--cream-text`, two lines: `Where Petals` / `*Drift* Downstream` (word "Drift" italic). Text has `text-shadow: 0 2px 40px rgba(37,28,22,0.35)`. - Under it: a thin 1px cream rule 64px wide, then `Koisei — 恋静` caption. - Bottom center: `SCROLL` label + 40px vertical line with a dot that loops downward (1.8s, `power1.inOut`, infinite). - Right screen edge: vertical Japanese strip `桜の川を下る` (Noto Serif JP, writing-mode: vertical-rl, cream 60%). **Entrance (after preloader).** Each headline line wrapped in an overflow-hidden mask; lines rise from `y: 110%` with `rotate: 2deg → 0`, stagger 0.12s, 1.1s `power4.out`. Kicker and rule fade/track-in 0.3s later. WebGL plane starts at `scale 1.12` easing to `1.0` over 2.4s. **WebGL petal system (signature element).** - `THREE.InstancedMesh`, 380 instances desktop / 120 mobile, each a small plane (8–18px) with a hand-drawn 5-petal sakura texture (draw it on an offscreen canvas: rounded-heart petal shape, `--sakura` fill, `--sakura-deep` inner shadow). - Per-instance attributes: size, phase, rotation speed, depth (z: -2 to 2 for parallax). - Motion in vertex shader or per-frame update: downward drift `vy = 0.15–0.4`, horizontal sway `x += sin(time*0.8 + phase) * 0.3`, plus a **curl-noise flow field** (simplex-based) bending trajectories like wind gusts; tumbling rotation on 2 axes. - Mouse interaction: pointer position pushes a radial impulse (radius 180px, force falls off quadratically) — petals scatter away from the cursor and recover. - Petals render OVER the hero image but UNDER the text (canvas z-index between). - Petal opacity ties to scroll: fade to 0 by the time section 3 begins, re-emerge tinted `--lantern` amber (fireflies/embers, slower, upward drift) in the night section. **Ripple shader on hero plane.** Fragment shader: subtle vertical sine displacement on the lower 35% of the image (the water) — `uv.x += sin(uv.y*40.0 + uTime*1.2) * 0.0015 * waterMask`, plus mouse-hover ripple: a decaying radial wave from pointer position (`uMouse`, `uWaveTime`). **Scroll exit (pinned, scrub).** ScrollTrigger pins the hero for `+=120%`. As you scroll: plane scales 1.0 → 1.18 and darkens (shader `uDarken` 0 → 0.25), headline moves up at 1.4× scroll speed and fades, and Section 2 slides over it from below like a paper sheet (Section 2 has higher z-index, `border-radius: 32px 32px 0 0` on its top edge during the overlap, flattening to 0 once fully covering). --- ## 7. SECTION 2 — MANIFESTO ("A River Remembers") Washi bg. Generous padding (16vh top/bottom). - Kicker left: `— 01 · THE PHILOSOPHY`. - A `--display-lg` serif statement spanning ~11 columns of a 12-col grid, `--ink`, mixed italics: `Every spring, the river carries a *million petals* from the mountains to the sea — and every petal remembers the tree it fell from.` - **Inline image tokens:** inside this headline, embed two small rounded-rect images (140×90px, border-radius 60px, the `KOI_RIVER` and `TEMPLE_CANAL` crops) sitting on the text baseline between words — they scale in from 0 width as the line reveals (a la modern editorial sites). - Reveal: split into lines (SplitType or manual), masked line-rise stagger 0.09s triggered at 70% viewport, scrub-free (`toggleActions: "play none none reverse"`). - Right-aligned below, max-width 34em body paragraph + a text link `Read the story of Koisei →` with draw-on underline. - Two large numbers row (`1,200 km` / `4 seasons`) in display serif with small caps labels, counter-animating up when in view. --- ## 8. SECTION 3 — SCROLL FILM I (pinned, video scrubbed by scroll) Full-bleed cinematic chapter using `SCROLL_FILM_1` (12s: koi → bridge → temple). **Mechanics (exact):** - `<video preload="auto" muted playsinline>` covering 100svh, `object-fit: cover`. - Pin the section for `+=400%` scroll. In `onUpdate`: `video.currentTime = self.progress * video.duration`, smoothed through a lerp (`current += (target - current) * 0.1` in a rAF loop) so scrubbing feels buttery, never steppy. Ensure the file is keyframe-dense; if seeking stutters, fall back to a canvas-drawn frame pipeline. - **Three text chapters** fade in/out sequentially over the film at progress 0.05–0.3, 0.38–0.63, 0.7–0.95. Each: centered kicker (`FIRST BEND`, `UNDER THE BRIDGE`, `THE TEMPLE GATE`) + one `--display-md` cream serif line (e.g., `*Koi* swim against the falling sky`). Text enters with masked rise + slight letter-spacing decay, exits fading up 40px. - Right edge: a vertical chapter indicator `Ⅰ · Ⅱ · Ⅲ` with the active numeral in vermilion. - Bottom left: a thin film-style progress bar (1px track, cream fill) showing scrub progress with `00:00 / 00:12` timecode in Space Grotesk tabular numerals. - Edge treatment: 6% `--night-deep` vignette + the global grain makes it feel filmic. --- ## 9. SECTION 4 — HORIZONTAL GALLERY ("Stations of the River") Pinned horizontal scroll on `--washi`. - Header row (static during pin): kicker `— 02 · STATIONS`, heading `Three *stations*, one current` (`--display-lg`), and right-aligned instruction `( scroll )`. - A track of **3 oversized cards** translating X from `0` to `-(trackWidth - viewport)` with `scrub: 1`, pinned `+=250%`. - Card spec: width `min(66vw, 900px)`, height 68vh, gap 6vw. Inside: the image fills the card with `overflow: hidden`; image itself is scaled 1.15 and translates X opposite to track motion (inner parallax, ±7%). 1px offset mat border. Corner radius 4px. - Card 01 — `TEMPLE_CANAL` — `Higashiyama Canal` — caption: `Stone bridges, incense, morning bells.` - Card 02 — `KIMONO_LANE` — `The Kimono Lane` — caption: `Where the road remembers slower centuries.` - Card 03 — `LANTERN_WATER` — `Asakusa Waterside` — caption: `Lanterns lean over the current at dusk.` - Each card's chrome: giant outlined number `01` (display serif, 9rem, `-webkit-text-stroke: 1px var(--ink)`, transparent fill) overlapping the image's top-left corner; title beneath the image in `--display-md`; caption + `Visit station →` link. - Numbers fill with solid ink when their card crosses viewport center. - Bottom: 1px progress line for the horizontal track + `01 — 03` counter that swaps with a small roll animation. - Cursor becomes a custom circular `DRAG`/`→` badge over this section (40px circle, mix-blend-difference). --- ## 10. SECTION 5 — DAY TO NIGHT (the metamorphosis) The emotional pivot. A pinned 100svh section, `+=200%`. - Background color animates `--washi` → `--night` via GSAP scrubbing a CSS variable (`backgroundColor` interpolation). The fixed nav flips to `.nav--night`. The global petal system swaps pink→`--lantern` embers drifting **upward**. - Centered: `LANTERN_WATER` image inside a tall portrait frame (42vw × 78vh) that **scales up to full-bleed** (transform scale + width/height interpolation via GSAP `flip` or clip-path expansion: `clip-path: inset(11vh 29vw)` → `inset(0)`), while a WebGL **dissolve shader** crossfades `LANTERN_WATER` → `NIGHT_LANTERN` using a perlin-noise threshold mask (`smoothstep(uProgress-0.08, uProgress+0.08, noise(uv*4.0))`) so day literally dissolves into night like ink in water. - Overlay copy at progress 0.1: kicker `— 03 · NIGHTFALL`, line `The river doesn't sleep — it *dreams*` in `--display-lg`, ink color transitioning to cream in sync with the bg. - Lantern glow: 6–8 positioned radial-gradient sprites (additive blending in the WebGL scene) pulsing gently (`opacity 0.6→0.9`, 3s sine loops, staggered) at the lantern positions of `NIGHT_LANTERN`. --- ## 11. SECTION 6 — SCROLL FILM II (night) Same mechanics as §8 with `SCROLL_FILM_2` (kimono → Asakusa night), pinned `+=350%`, on `--night`. - Two chapters: `THE LAST LANE` (`She walks where the lanterns *lean*`) and `ASAKUSA AT NIGHT` (`Every light is a wish going downstream`). - Ends with a full-stop moment: film settles on its final frame, darkens 30%, and a centered quote fades in — `"恋静 — quiet love, moving water."` with attribution `— Koisei` — held for the last 15% of the pin. --- ## 12. SECTION 7 — FOOTER On `--washi` (snap back to light with a quick 0.8s bg transition — dawn). - Top row: kicker `— BEGIN YOUR JOURNEY`, then a giant CTA line `Come see the river *bloom*` (`--display-lg`) with a circular vermilion button (120px, `Begin →`, magnetic hover: translates toward cursor within 24px, springs back `elastic.out(1, 0.4)`). - Middle: 3 link columns (Journey / Stories / Visit · Instagram / Vimeo / http://Are.na · Contact / Press) in Space Grotesk 13px, hover underline draw; plus a vertical `ありがとう` strip. - Bottom: the wordmark **KOISEI** at `--display-xl` stretched nearly full-width (`font-size` fitted via JS to viewport width), ink color, sitting on the baseline of the page — it rises from below with a masked reveal as the footer enters, with petals settling on top of the letters (petal system y-velocity → 0 near footer, landing on an invisible floor at the wordmark's cap line). - Very bottom: 1px rule, `© 2026 Koisei — down the spring river` left, `Kyoto → Tokyo` right, 10px. --- ## 13. GLOBAL MOTION LANGUAGE - Easing vocabulary: reveals `power4.out`, pinned scrubs linear (`scrub: 1`–`1.5`), color shifts `none` (scrub), micro-interactions `power2.out`, magnetic/elastic `elastic.out(1,0.4)`. - Every heading reveal = masked line rise (110% → 0, 1–2° rotation settle). Every image reveal = `clip-path: inset(100% 0 0 0)` → `inset(0)` at 1.2s `power4.inOut` with inner image counter-scaling 1.25 → 1. - Parallax: decorative elements move at 0.85×–1.2× via `data-speed` attributes processed by a single ScrollTrigger. - Custom cursor: 8px ink dot + 32px trailing ring (lerp 0.15); ring expands to 56px over links, morphs to `→` over cards, `▶` over films. - `prefers-reduced-motion`: kill pins/scrubs, videos become posters, petals static, reveals become simple fades. ## 14. PERFORMANCE & RESPONSIVE - One shared `WebGLRenderer` (alpha, antialiasing off, `devicePixelRatio` capped at 1.75); planes/particles added-removed per section visibility. Pause rAF work for offscreen scenes via IntersectionObserver. - Videos: `preload="metadata"` until their section is within 150% viewport, then `preload="auto"`. - Mobile (<768px): petals 120, horizontal gallery becomes native swipe track (no pin), film pins shorten to `+=250%`, display-xl clamps down, inline headline images hidden, custom cursor disabled. - Lazy-decode all plates (`decoding="async"`), and serve the WebGL textures through `THREE.TextureLoader` with `SRGBColorSpace`. ## 15. ACCEPTANCE CHECKLIST 1. Loader → hero entrance feels like one continuous shot. 2. Petals react to the mouse and change character (pink/down → amber/up) across day/night. 3. Both films scrub perfectly smoothly with lerped `currentTime`. 4. Day→night dissolve uses a noise-threshold shader, not a plain crossfade. 5. Horizontal gallery has inner-parallax images and outlined numbers that fill on center. 6. Nav adapts light/dark automatically; progress rail tracks 7 sections. 7. Footer wordmark nearly spans the viewport and petals settle on it. 8. Grain, mat borders, and vignettes present on every section. 60fps on an M1 laptop.

Design a vast, hypnotic, ultra-minimal landing page for a Kubrick-inspired space tourism company called ODYSSEY BEYOND. Zero static images — every visual surface is living video. HERO SECTION: Full-screen looping cinematic video recreating the docking sequence from 2001: A Space Odyssey. A sleek white spacecraft rotates slowly in vacuum, sunlight crawling across its hull in a razor-sharp line. A massive rotating space station grows incrementally larger — the camera performs an imperceptibly slow forward dolly toward the docking bay. No sound, only visual rhythm of rotation and approach. Stars hold perfectly still. Color grade references ENR silver-retention — ultra-high contrast, blown-out whites on hull, inky blacks in space, subtle cool blue cast, sterile and clinical. ODYSSEY BEYOND appears in thin wide-tracked sans-serif, fading in with glacial slowness. Below: Commercial Orbital Departures — 2027. CTA: a white outlined circle that fills slowly like an airlock pressurizing on hover. Color palette: Void Black #000000, HAL Red #FF0000, Starlight White #F5F5F5, Orbital Blue #1565C0, Station Grey #B0BEC5. Fonts: Orbitron for headings, Inter for body. Sections: (1) Destinations — full-width video panels: Earth rotating from orbit, Moon surface gliding beneath a window, station corridor with Earth through porthole. Stats count up like instruments. (2) The Vessel — 360-degree orbiting video of spacecraft exterior, interior clips of floating water droplets, observation deck with Earth filling the window. (3) Training Program — centrifuge, zero-G simulation, pressure suit fitting — each framed as Kubrick one-point-perspective shots. (4) Mission Control — dashboard over flickering control room video, countdown timers. Every frame obsessively composed. The silence should feel loud.

Build a full-screen hero section with a fixed background video (position: fixed, object-cover, muted, playsInline, preload="auto"). Tie video playback to scroll using Framer Motion's useScroll hook - map scroll progress (0-1) to video.currentTime via targetTimeRef, then smoothly interpolate with requestAnimationFrame loop using lerp (currentTimeRef += diff * lerpFactor). Add a dark overlay (bg-background/50) on the video. Create multiple text sections that fade in/out based on scroll position using useTransform for opacity, Y translation, and blur. Make the hero container h-[300vh] with a sticky top-0 h-screen inner wrapper so content scrolls over the fixed video. Include a scroll indicator at the bottom that fades out on scroll (useTransform(scrollYProgress, [0, 0.05], [1, 0])).

Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite. The design should feature a high-end, dark-mode "glassmorphism" aesthetic with specific purple/pink gradients. 1. Tech Stack & Libraries: Use hls.js for video streaming. Use motion/react (formerly Framer Motion) for animations. Use react-use-measure for sizing logic. Use clsx and tailwind-merge for class management. Use lucide-react for standard icons (if needed), but I will provide custom SVG paths for specific UI elements. 2. Global Styling: Background: Dark/Black (#010101). Primary Gradient: A diagonal gradient used for accents: from-[#FA93FA] via-[#C967E8] to-[#983AD6]. Typography: Modern sans-serif, center-aligned hero text. 3. Hero Section Components: Announcement Pill: A pill-shaped top badge. Background: Semi-transparent dark (bg-[rgba(28,27,36,0.15)]) with a subtle border. Icon: A "Zap" icon inside a gradient-filled box with a glow effect. Text: "Used by founders. Loved by devs." in light grey. Main Headline (H1): Large text (responsive sizing: 48px mobile to 80px desktop). Text: "Your Vision" on line 1, "Our Digital Reality." on line 2. Style: Text should have a gradient fill (White to Purple/Pink). Subheadline: Text: "We turn bold ideas into modern designs that don’t just look amazing, they grow your business fast." Color: text-white/80. CTA Button: "Book a 15-min call" text. Rounded full button with a white background and black text. Includes a circle icon with an arrow inside, styled with the primary purple gradient. Outer border wrapper with a glass effect. 4. Hero Video Integration (Critical Details): Source: HLS Stream URL: https://customer-cbeadsgr09pnsezs.cloudflarestream.com/697945ca6b876878dba3b23fbd2f1561/manifest/video.m3u8 Fallback: If HLS fails, fallback to this MP4: /_videos/v1/f0c78f536d5f21a047fb7792723a36f9d647daa1 Implementation: Do NOT use react-player. Use a native <video> tag with a custom useEffect hook implementation of hls.js. Styling: Blend Mode: Use mix-blend-screen so the video black background blends into the page. Positioning: The video should be at the bottom of the hero. Apply a negative top margin (-mt-[150px]) so it overlaps behind the text. Z-Index: Ensure the text content is z-20 (above) and video is z-10 (below). Layout: The video must be 100% width (w-full), auto height, and stretch edge-to-edge without being cropped (do not use object-contain or fixed heights). Overlay: Add a gradient fade (from-[#010101] via-transparent to-[#010101]) over the video container. 5. Logo Cloud Section (Animated): Place this section immediately below the video. Background: Semi-transparent glass (bg-black/20 backdrop-blur-sm) with a top border (border-white/5). Layout: Desktop: "Powering the best teams" text on the left, separated by a vertical divider. Animated logo slider on the right. Mobile: Stacked vertically. Animation: Create an InfiniteSlider component using motion/react that scrolls logos horizontally forever. Logos: Use these SVG URLs (OpenAI, Nvidia, GitHub, etc.) and apply brightness-0 invert to make them white. https://html.tailus.io/blocks/customers/openai.svg https://html.tailus.io/blocks/customers/nvidia.svg (Include others similarly) Please assemble these into a cohesive Hero.tsx, App.tsx, and components/ui/infinite-slider.tsx structure.

Build a dark, minimal "Automation Machines" landing page in React + Vite + Tailwind CSS v4 + Motion (from "motion/react") + Lucide React icons + Spline 3D. Fonts (Google Fonts): Orbitron (headings), Space Grotesk (body), JetBrains Mono (labels/stats/nav). Tailwind v4 theme colors: brand-orange #F27D26, bg #0a0a0a, text #f5f5f5, muted #888, stroke #1f1f1f. All backgrounds are pure black. Text is white at varying opacities. No purple/indigo anywhere. Layout & Spline 3D: A fixed full-screen Spline scene (z-20) using https://prod.spline.design/PIgTjpRFA03yfLyK/scene.splinecode, lazy-loaded. On scroll, the Spline wrapper smoothly repositions via CSS transform: centered-right for hero (translateX 28%, scale 1.1), slides left for features (translateX -30%, scale 1.05), slides right for process (translateX 30%, scale 1.1). Use lerp between keypoints based on normalized scroll progress. The Spline object also rotates: rotation.y = scrollProgress * PI * 2. Forward wheel/touch events from the Spline canvas to window.scrollBy so scrolling works over the 3D. Content sections use pointer-events-none (with buttons/links set to pointer-events-auto) so the 3D stays interactive beneath. Z-index layers: Hero z-10, Spline z-20, Features/Process z-30, Navbar/ScrollProgress z-50. Scroll Progress Bar: 1px white/40 line fixed at top, driven by motion's useScroll + useSpring (scaleX). Navbar: Fixed, z-50. Logo "Automation" in Orbitron uppercase tracking-widest. Links: Home, Features, Process, Stats -- in JetBrains Mono 11px uppercase white/50. CTA "Get Started" white pill button. Background transitions from transparent to black/70 + backdrop-blur on scroll. Mobile hamburger menu. Hero Section: Centered, min-h-screen. Large Orbitron title "Automation / Machines *" -- extralight uppercase, gradient text from white/20 via white/70 to white. Subtitle in Space Grotesk white/70 about building the web. Row of 3 circular icon buttons (Snowflake, Maximize, Zap). All fade-up animated. Features Section: Right-aligned (flex justify-end, w-55% on desktop). Section header: thin line + "Core Systems" mono label, then Orbitron title "Built for / Performance" (first line gradient, second solid white). 3 cards in a grid with border white/6, rounded-2xl, bg white/2. Each card has an icon, stat value (JetBrains Mono), and title. Cards: (Cpu, "Intelligent Runtime", "<12ms Response"), (Globe, "Edge Distribution", "200+ Nodes"), (Shield, "Zero-Trust Security", "256-bit Encryption"). Staggered fade-up on scroll. Process Section: Left-aligned (w-50% on desktop). Same header pattern: "Workflow" label, "From Idea / To Production" title. Vertical timeline with 2 steps, each with a circle icon connected by an animated vertical line. Steps: (Terminal, "01 Initialize & Develop", tags: "TypeScript + Vite", "HMR < 50ms"), (Rocket, "02 Deploy & Monitor", tags: "Zero-config CI/CD", "Live metrics"). Tags are small mono-text pill borders. Slide-in-from-left animation. useInView hook: IntersectionObserver-based, fires once (never reverses). Used for all section entrance animations. Key design rules: Section headers always follow: horizontal line + mono label above, large Orbitron gradient-to-solid title below Typography: Orbitron for display, Space Grotesk for body, JetBrains Mono for labels/stats All animations are entrance-only, no reverse Dark, technical, minimal aesthetic -- like a developer infrastructure product

Build a Duolingo landing page clone using Vite (vanilla JS, no framework). The page has the following sections in order: FONTS Primary font: Nunito from Google Fonts (weights: 400, 500, 600, 700, 800, 900) Display/heading font: Feather Bold from https://db.onlinewebfonts.com/c/14936bb7a4b6575fd2eee80a3ab52cc2?family=Feather+Bold CSS font stack fallback: 'Nunito', 'DIN Round Pro', -apple-system, BlinkMacSystemFont, sans-serif CSS VARIABLES --green: rgb(88, 204, 2) --dark-blue: rgb(16, 15, 62) --blue: rgb(28, 176, 246) --gray-text: rgb(75, 75, 75) --gray-light: rgb(119, 119, 119) --border-color: rgb(229, 229, 229) --nav-text: rgb(175, 175, 175) --footer-green: #4EC604 --footer-header: rgb(215, 255, 184) --footer-link: rgb(165, 237, 110) VIDEOS (HLS via hls.js) All videos use HLS streaming via hls.js loaded from CDN: https://cdn.jsdelivr.net/npm/hls.js@1.5.7 Videos are lazy-loaded using IntersectionObserver with 200px rootMargin. Each video is initialized only once. When out of viewport, videos pause. When back in viewport, they resume. HLS is configured with capLevelToPlayerSize: false, startLevel: -1, abrEwmaDefaultEstimate: 50000000, maxBufferLength: 60, maxMaxBufferLength: 120. On MANIFEST_PARSED, force the highest quality level. Video sources (all .m3u8 HLS streams from Mux): Hero video (heroVideo): https://stream.mux.com/ze00dOwsh5muXXj01EWSfdilcHjcGqlznBuFR5GEYlZe00.m3u8 Section 2 - "free. fun. effective." (section2Video): https://stream.mux.com/fZLc8HBCvnnsJ1Z021CzK00VDsaM2G01QaApokgnLiil6Q.m3u8 Section 3 - Super Duolingo (section3Video): https://stream.mux.com/JYOLW4tkLJJL4hOKcazRgJqjaV00AfQvh2Nca701vxUao.m3u8 Learn Anywhere background (learnAnywhereVideo): https://stream.mux.com/6xLBelbJrZGw00K2jPsZtGm8pkftvfezQ8rdAmHL9HoM.m3u8 Section 4 - English Test (section4Video): https://stream.mux.com/eEVujEMKUUknKhmJ6vtVeHuRtzS51401CFZM6pFp8yj00.m3u8 CTA bottom video (ctaVideo): https://stream.mux.com/1RSKj01UjpjdbxtOEtuQ01t1O00fqI5QQbn7mTW7UiTBy8.m3u8 All <video> elements have: autoplay muted loop playsinline. SECTION 1: FIXED NAVIGATION BAR Fixed to top, z-index 2, white background, bottom border 1px solid rgb(229,229,229) Inner container: max-width 1440px, centered, height 70px, padding 0 24px, flex space-between Left: Duolingo logo link to https://www.duolingo.com/, logo image: https://d35aaqx5ub95lt.cloudfront.net/images/splash/f92d5f2f7d56636846861c458c0d0b6c.svg (179x42px) Right: "Site language: English" button with dropdown arrow icon https://d35aaqx5ub95lt.cloudfront.net/images/splash/c6eae48dd48246c89e415b89f9e55282.svg (14x14px), text is uppercase, font-weight 700, color rgb(175,175,175), font-size 16px Favicon: https://d35aaqx5ub95lt.cloudfront.net/vendor/avatars/duo_original.svg SECTION 2: HERO Flex row, centered, gap 80px, padding 48px 80px, max-width 1200px, flex:1 to fill remaining header height Header wraps nav + hero + lang-nav, has padding-top 70px (for fixed nav), min-height 100vh Left column: Video (424x424px, aspect-ratio 1, object-fit contain, border-radius 16px, white background) Right column:h1: "The free, fun, and effective way to learn a language!" - color rgb(75,75,75), font-size 32px, max-width 400px, text-align center, line-height 1.3 "Get started" button: green (rgb(88,204,2)), white text, height 50px, border-radius 12px, uppercase, font-weight 700, font-size 16px, full width, box-shadow 0 4px 0 #61B800, links to /register "I ALREADY HAVE AN ACCOUNT" button: transparent bg, blue text (rgb(28,176,246)), 2px border #CFCFCF, height 50px, border-radius 12px, box-shadow 0 4px 0 #CFCFCF Buttons container: max-width 330px, gap 12px, margin-top 40px on desktop (768px+) SECTION 3: LANGUAGE NAVIGATION BAR Full width, bordered top and bottom with 2px solid rgb(229,229,229) Grid: 14px 1fr 14px, gap 30px, height 74px, max-width 1056px Left/right: chevron SVG arrows (14x14px, stroke #afafaf). Right arrow rotated 180deg. Clickable - scrolls the list by 300px Center: horizontal scrolling list (overflow-x auto, hidden scrollbar), gap 24px Each language item: flex row, flag image (36x27.77px) + uppercase text (16px, font-weight 700, color rgb(119,119,119)), gap 6px, padding 4px, border-radius 8px, hover bg rgba(0,0,0,0.05) 38 languages total with their respective CloudFront flag SVG URLs (all from http://d35aaqx5ub95lt.cloudfront.net/vendor/):English: bbe17e16aa4a106032d8e3521eaed13e.svg Spanish: 59a90a2cedd48b751a8fd22014768fd7.svg French: 482fda142ee4abd728ebf4ccce5d3307.svg German: c71db846ffab7e0a74bc6971e34ad82e.svg Italian: 635a09df9323279d39934a991edd4510.svg Portuguese: 27d253ae1272917fc9f4a79459aacd53.svg Math: 395c8a6ee9783610b578b02fda405e85.svg Dutch: de945d789e249dcd74333a6996472ef8.svg Japanese: edea4fa18ff3e7d8c0282de3f102aaed.svg Arabic: 9ab6930a263c981b57f9d578ac97cae7.svg Czech: 828bf0fea457d3beaaab3d6c0bfcc975.svg Welsh: f773f1b240623072e48843ecdf90d756.svg Danish: 6af84a7cb8e99ea8a567c2b9c55b9926.svg Greek: 8db373482261397a3159d3f370eed2f3.svg Esperanto: 6de7e4731b2a82a6458268e1a3d67ce4.svg Finnish: b4d0e4f6451f504e1441eb93efdbea5e.svg Irish: ef0bfb96037b127473bd7bcbfde1a6ed.svg Scottish Gaelic: 09eba3135efe8fe93a4662dba813b921.svg Hebrew: f818f545a703ddaa046ca8786e781742.svg Hindi: 73837fa39dbf1bcc4c95a17a58ed0ffb.svg Haitian Creole: 8cb302b44c183c1a8ec3b90caf90d922.svg Hungarian: 2ed8d0a73eab3c9cba0290e2b459684a.svg High Valyrian: 2880099b038848abbfd11104097953ad.svg Hawaiian: 312e21f793c555787d01a45e20ee8191.svg Indonesian: 339c0413e542f19b234971d7740447e7.svg Korean: ec5835ac9f465ff3dad4b1b8725d4314.svg Latin: f7cee6cc09270371b097129faf792c2a.svg Norwegian (Bokmal): 90b37d97edc66e830dc2286279548f67.svg Navajo: bbc8ad0cfe2596d5193376ebdc3e969c.svg Polish: f095084e6ec400e631d62c3d95fefaa2.svg Romanian: 357e13bb10cf86fc06552d563957e2e6.svg Russian: eadd7804652170c33814a89482f1f353.svg Swedish: f578430c9b7ab617c107893afbb501c0.svg Swahili: 335311988405b4354e1b6ae9037c02db.svg Klingon: 76d654213a8282b0ebc25b4f535ee003.svg Turkish: bc80a9518cd6d5af6ae14e8b22b8a1f4.svg Ukrainian: 7c6e12bc57527843082f7f5bb77c9862.svg Vietnamese: 2b077d42185bc45d4896ed55f15c4fea.svg Yiddish: 55bad151fa6a8d9e2376fc9697c671c8.svg Chinese: 9905aa3a86fcb9e351b0b3bfaf04d8b9.svg Zulu: 112e1531d0ac198a9424bd1b0a7166e6.svg SECTION 4: "free. fun. effective." Flex row, centered, gap 102px, padding 96px 80px, max-width 1200px Left: text content (max-width 480px)h2: "free. fun. effective." in Feather Bold, green (var(--green)), font-size 48px, line-height 1.1, white-space nowrap Paragraph: gray (rgb(119,119,119)), 18px, line-height 1.6. Contains link "research shows that it works" to /efficacy in blue, font-weight 700 Full text: "Learning with Duolingo is fun, and research shows that it works! With quick, bite-sized lessons, you'll earn points and unlock new levels while gaining real-world communication skills." Right: 530x530px video container (white bg, border-radius 16px) SECTION 5: GRADIENT BAR + "LEARN ANYTIME, ANYWHERE" Gradient bar: full width, 150px height, linear-gradient(to bottom, #ffffff, #DBF3FF) Section: relative positioned, background #ddf0fa, flex, align-items flex-start, justify center, min-height 100vh, padding 60px 40px 120px, overflow hidden Background video: absolute positioned, covers full section, object-fit cover, z-index 0, background-color #ddf0fa Content (z-index 1):h2: "learn anytime, anywhere" (with <br> between comma and "anywhere"), color rgb(1,45,82), Feather Bold, 48px, line-height 1.15, text-align center Two store buttons side by side (gap 16px):App Store button: Apple icon image https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_154356_13de5dda-6dfe-4f54-b3e2-251301254578.png&w=1280&q=85 (28x28px), "Download on the" + "App Store", links to Apple App Store Google Play button: Play icon image https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_154325_6e98dcdb-51ba-446a-8c52-2d2f2675a575.png&w=1280&q=85 (28x28px), "Get it on" + "Google Play" Both: white bg, 2px border #CFCFCF, border-radius 12px, padding 10px 20px, box-shadow 0 4px 0 #CFCFCF, hover bg #f0f0f0 Store label: 11px, font-weight 600, color rgb(75,75,75) Store name: 16px, font-weight 700, color rgb(75,75,75) SECTION 6: SUPER DUOLINGO (DARK) Background: #121138, flex row centered, gap 40px, padding 186px 80px Left: 530x530px video (bg matches dark section #121138) Right:Super Duolingo logo (uses <picture> with <source> for SVG): https://d35aaqx5ub95lt.cloudfront.net/images/splash/3a733db6d6873e1a915f70cf72554ce3.svg (source) and https://d35aaqx5ub95lt.cloudfront.net/images/splash/dd7453522d3192d4df06d4652508b8bc.svg (img fallback), 605px wide "Try 1 week free" button: white bg, dark text rgb(0,4,55), height 50px, border-radius 12px, uppercase, font-weight 700, min-width 162px, box-shadow 0 4px 0 #88879F, hover bg #c8f040 SECTION 7: DUOLINGO ENGLISH TEST Same layout as Section 4 but with flex-direction: row-reverse (text on left, video on right... visually reversed) h2: "duolingo english test" (with &nbsp; between english and test), green, Feather Bold, 48px Paragraph: "Our convenient, fast, and affordable English test integrates the latest assessment science and AI -- empowering anyone to accurately test their English where and when they're at their best." Link button: "Certify your English" in blue, uppercase, 16px, font-weight 700, height 50px, border-radius 12px, hover bg rgba(28,176,246,0.08), links to https://englishtest.duolingo.com/en SECTION 8: CTA - "LEARN A LANGUAGE WITH DUOLINGO" Flex row with green side panels (var(--green)) on left and right that grow to fill, aligned to bottom Center column:Top area: flex column centered, padding-top 40px, gap 48px h1: "learn a language with duolingo" in Feather Bold, green, 64px, text-align center, max-width 800px, line-height 1.1 "Get started" green button (same style as hero but with width: auto, padding: 0 32px, margin-bottom: 8px) Full-width video (100vw, white bg) below the CTA content SECTION 9: FOOTER Background: #4EC604, font-weight 700 Grid: 5 columns, gap 24px, padding 96px 64px 64px, max-width 1440px Column headers: color rgb(215,255,184), 20px, font-weight 700 Links: color rgb(165,237,110), 16px, hover opacity 0.8 + underline 5 columns: "About us" (12 links), "Products" (8 links), "Apps" (2 links), "Help and support" (4 links), "Privacy and terms" (4 links) + "Social" sub-header with margin-top 32px (6 links) Divider: 1px solid #A5ED6E Site language section: padding 40px 64px 64px, "Site language:" label + flex-wrap list of 28 language links (14px, color rgb(165,237,110)) RESPONSIVE BREAKPOINTS 1200px and below: Hero: padding 48px 40px, gap 40px Content sections: padding 72px 40px, gap 60px Animation wrapper: 400x400px Footer grid: 3 columns, padding 64px 40px 900px and below: Hero: column direction, padding 32px 24px, gap 32px, video 320px Content sections: column direction, padding 48px 24px, gap 40px, text centered Animation wrapper: 320x320px Dark section: column, padding 80px 24px Learn anywhere: padding 80px 24px, buttons stack vertically (max-width 280px) CTA h1: 48px, green sides hidden, section becomes column Footer: 2 columns, padding 48px 24px Lang nav: padding 0 16px, gap 12px 600px and below: Hero h1: 24px, video 280px Text h2: 32px, paragraph 16px Animation wrapper: 280x280px Dark section: padding 60px 16px Learn anywhere: padding 60px 16px, h2 32px CTA h1: 32px, top padding 32px, gap 32px Footer: single column, gap 32px Lang nav: gap 16px, text 14px, flags 28px Nav language button text hidden

**Create a full-screen hero section for a futuristic cyberpunk fashion e-commerce site with a pure black background.** **Typography:** - Display font: "Orbitron" (Google Font), used for headlines and buttons - Body font: "Space Grotesk" (Google Font) - All text is white **Background Video:** - A looping, muted, autoplaying background video covering the entire section - Video source: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260303_175853_da9ead9c-0e05-40d9-b9bd-06a9b5a73d27.mp4` - Apply a dark gradient overlay on top: `bg-gradient-to-t from-black/70 via-black/20 to-transparent` **Navigation (absolute positioned at top):** - **Left:** A circular black button (w-12 h-12 on mobile, w-[5.5rem] h-[5.5rem] on desktop) containing the site logo image - **Right (desktop only):** Three elements in a row: 1. Circular black button with a Search icon (w-[5.5rem] h-[5.5rem]) 2. Circular black button with a ShoppingCart icon (w-[5.5rem] h-[5.5rem]) 3. A pill-shaped black container (h-[5.5rem]) with a white circular avatar containing a User icon on the left, and the text "Contact" on the right - **Right (mobile only):** A circular black hamburger menu button (w-12 h-12). When tapped, it opens a black rounded dropdown below the nav with three rows: Search, Cart, Contact — each with icon + label **Product Pins (desktop only, hidden on mobile):** - Three floating product callouts positioned absolutely over the video: 1. **"NEUROVIBE MK-I — $230"** at `left-[8%] top-[18%]`: Text on the left, then a horizontal white line (w-20), then a small hollow white circle (w-2.5 h-2.5, border-2) 2. **"VOIDBLADE — $120"** at `right-[8%] top-[42%]`: Small hollow circle on the left, then a horizontal white line (w-16), then text on the right 3. **"SHADOW CIRCUIT JACKET — $450"** at `right-[8%] top-[58%]`: Same layout as VOIDBLADE — circle, line, text - Text uses `text-sm tracking-[0.15em] font-medium` for the name and `text-sm` for the price - Lines use `bg-primary-foreground/40`, circles use `border-primary-foreground/60` **Hero Headline (bottom-left):** - Positioned at `bottom-[8%] left-[3%]` - Three lines of uppercase text: "Future" / "Fashion," / "Redefined." - Font: Orbitron display, `text-5xl md:text-7xl lg:text-8xl`, `leading-[0.9] tracking-tight`, white **Shop Button (bottom-right corner):** - Positioned at `absolute bottom-0 right-0` - Black background, white text, `rounded-tl-[1.5rem]` (only top-left corner rounded) - Padding: `px-8 py-4` on mobile, `px-12 py-6` on desktop - Text: "Shop" on mobile, "Shop Now" on desktop - Font: Orbitron, `tracking-[0.2em] uppercase` **Color System:** - Background (--background): pure black `0 0% 0%` - Primary (--primary): black `0 0% 0%` - Primary-foreground: white `0 0% 100%` - Use semantic Tailwind tokens throughout — no hardcoded color classes

Build a landing page for an art curation app with an interactive cursor trail effect. The page should have a warm cream/linen textured background (color #FAF8F3) with subtle noise, gradient overlays, and faint linen-line patterns for a gallery feel. Create a cursor trail that spawns framed artwork images as the user moves their mouse - each image appears in a decorative picture frame (dark wood outer frame with gold inner border and cream mat) with slight rotation and drop shadows. The trail should show up to 8 images that fade in/out smoothly using Framer Motion. Include 3 different art collections (10-12 images each) that cycle when the user clicks anywhere on the page, with a matching custom cursor icon for each set. Add a header with the app name and auth buttons, plus a centered hero section with serif typography headline, description text, and CTA button. For the assets: Go to the IMAGES tab in Vibecode and generate 10-12 artwork images per theme (e.g., classical portraits, abstract art, landscapes). Generate them as vertical/portrait orientation. Also generate 3 custom cursor icons (small 50-60px images like a paintbrush, palette, or art-related symbol). Upload all images to the public folder, then reference them in arrays in your Index.tsx - one array per art set, plus an array for cursor icons. The cursor and trail images swap together when the user clicks.

<inputs> Ask me for: the product the landing page is for, the prompt a user types, a hero photo for the page, a background photo behind the prompt box, and my model name for the label. If I skip any, use the defaults: a meme landing page "Monke" for a monkey who takes selfies, the famous public-domain monkey selfie from Wikimedia Commons as the hero, the CC0 "Baby goat jumping" photo from Wikimedia Commons as the background (mirrored so the goat leaps on the right), the model label "Opus 5.5", and Mixkit's free track "Voxscape". </inputs> <direction> A 7.5 second prompt-to-website reveal, 1920x1080 at 30fps (226 frames), one continuous take: a prompt types, the send button is pressed, and the box itself becomes the finished landing page. Look: blue-graded sky #294376→#769cc2 with thin white line graphics (two circles, two horizontal and two vertical lines, two diagonals, 4-point sparkles at the crossings, a blurred violet→yellow→teal rainbow glow top-right, light film grain). The background subject is a crisp, opaque, full-colour cut-out (hand-traced mask, 2–3 px feather) on the right. White prompt box, radius 18, soft shadow; Inter 34.8px/44.4px #121212; black send button with a white arrow; a grey "Opus 5.5 ⌄" label beside it. Freshly typed characters arrive indigo #24249a, pass through blue and maroon, and settle to #121212 over ~13 frames. Page: full-bleed hero with the subject cut out on the right over a steel-blue sky #3b5876→#75a2c4, and a horizontal motion-blur smear of the subject trailing left. White Inter UI: logo top-left, nav Features/Pricing/FAQ/Download, an outline pill top-right, bold 63px headline, 23px paragraph, white pill CTA, three muted feature rows with icons, three muted wordmarks bottom-left. Default page copy: logo "Monke"; pill "Made with Claude Opus 5.5"; headline "Smile Harder. Selfie / Smarter, Week by Week"; paragraph "Monke tracks grins, bananas, selfies and naps—then turns every photo into clear, motivating progress you'll actually feel."; CTA "Get the Banana"; features "Grin zones (Z1–Z5 time & trends)", "Banana scores (coach-ready)", "Auto-sync from any camera you steal"; wordmarks BANANA CO. / JUNGLE / OPUS 5.5. Give the monkey white shield sport sunglasses with a mirrored lens (yellow→orange→red→magenta→orange→yellow, vertical streaks, top highlight, drop shadow) along his eye line (25° tilt). Banned: crossfades between scenes, stock UI kits, glows on the text, anything that looks like a template. </direction> <structure> Default prompt typed: "Build a premium, modern meme-tech landing page for a monkey who takes selfies. Create a full-screen cinematic hero featuring a grinning macaque in sport sunglasses, positioned on the right side with generous negative space on the left. Use a bold white headline about taking better selfies, a short supporting paragraph, and a clean rounded "Get the Banana" CTA. / Add a minimal top navigation with logo." f0–29, type: the box starts at x884 y635 709x112 and eases out to x570 y477 778x130 (90% there by f12) while the whole scene pulls back 7%. Typing starts on f4 with a real keystroke rhythm, reaches 30 characters by f26, then stalls. Four white selection handles hug the box corners. f29–44, charge: a violet solarised wash floods the scene (peak f36). The box tilts back up to 12° (rotateX, peak f36), the handles fly out to the frame corners, and an ASCII field of % @ # ⨸ glyphs appears at the left and right edges. The box grows to a tall card x541–1374, y425→227. On f40–48 the rest of the prompt bursts in (about 50 characters per frame) and fills ~12 lines. f48–63, settle: the tall card lands at x575 y227 766x626. The camera eases back toward the subject. A black cursor appears on f55 at (1455,595), pointing up-left, and grows to 112 px. f64–96, press: hard cut to a 3.19x zoom on the send button (75 px becomes 239 px on screen), a pale pink wash across the top. The cursor swings in from the right (f64–68) and glides to the button (f68–80). Press f80–86: the cursor squashes to 0.9, the button inflates 12% and flashes Claude terracotta #D97757, and the box edge bulges under it. f93–96 the frame blurs 6 px under a lavender veil. f97–120, reveal: wide shot. The page's hero photo zooms slowly behind (1.1% per frame). The box (763x596) drops from y60 to y245 with an ease-out, settled by f110. On f106–110 it turns grey, then goes dark from the bottom while a cyan band sweeps down through it (f111–121), wiping the text away. f121–145, morph: the box grows into the page, from x576 y245 763x596 to full frame on a fast ease-out (half the distance by f127, full by f145). Its fill is glass: a dark veil at the top, a cyan→white band sweeping down and out, white fading away. Every page element slides from inside the box to its final place on one progress curve (50% at f130, 90% at f147, done at f161). The headline types two lines at once from f122 to f158. f161–224, pull back: the page shrinks around its centre onto a flat #dddddd background, from 1920 px wide to 1344 px (1634 by f173, 1404 by f190, 1344 by f214). The hero's motion blur strengthens as it goes. f225 is black. </structure> <build> 1. One HTML file, 1920x1080, rendered from seek(t). Every style is a pure function of the frame: no CSS transitions, no timers, no Math.random. Use seeded hashes. 2. Animate with keyframe tables, kf(frame, [[f, value], ...], ease), interpolating numbers or arrays. Every move above is a table of these keyframes. 3. Cut-outs are SVG masks from hand-traced polygons with a 2–3 px Gaussian feather. The motion-blur smear is a scaleX-stretched copy through an SVG horizontal blur (feGaussianBlur stdDeviation="40 0"). 4. The press, the grey-to-dark box and the glass card are layered linear gradients whose stop positions are driven by the band value. 5. Sound: no voice. - Music: cut Voxscape so its first bass step lands at 1.72 s (source 38.76 s) and its big bass attack at 4.11 s (source 47.36 s, splice at 3.41 s). - Low-pass sweeps: the music dips to 400 Hz from 2.4 to 2.78 s and to 150 Hz from 3.41 to 3.58 s, reopens by 4.08, and fades out 6.6–7.5 s. - Synthesized sound effects: keystroke ticks on the typing (0.13–1.97 s) and on the headline (4.3–5.1 s); whooshes at 1.35, 2.18 and 3.30 s; a click at 2.78 s; a shimmer rising to 4.08 s; a sub boom at 4.09 s; a pop at 5.15 s; a settle at 6.54 s. - Master to -14 LUFS, true peak -1 dBTP. 6. Render with Playwright, one screenshot per frame, then encode h264 at 30 fps and mux the audio. </build> <gotchas> Measure text only after the fonts load, or the words collide. The cut-out subject must be opaque and crisp; blending it into the sky makes it look like a ghost. The zoom shot is a hard cut, not a zoom animation. Keep the page content inside the card while it grows (overflow hidden), except the nav, which sits above the box early on. Frame 225 is black. </gotchas> <start> Ask me for the inputs. Then show me 4 stills (f20 typing, f82 the press, f125 mid-morph, f200 the pull-back) before you render the full film. </start>

Build an Awwwards-level responsive website for “Lumenform”, a fictional creative AI studio. Use generated assets, multiple if needed. Make it cinematic, premium, original, with parallax, scroll-based motion, strong typography, layered depth, polished mobile, and clean interactions.

https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md Based on the skill above, generate images for a website for an AI agency. The design should include eight sections, with one image per section, for a total of eight distinct images. The website is for a creative AI company focused on research in creativity and design. Because of that, I want the visuals to feel highly original, playful, and art-directed, with text integrated thoughtfully into the design. Make it feel ultra-creative and intentional, like an Awwwards SOTD-level website in both concept and execution. Please go beyond standard layouts. Do not rely only on simple text-left, image-right compositions. Explore more experimental and varied layouts. Feel free to go completely wild, but keep it purposeful, not random. I want different section structures, including horizontal images, fullscreen sections, full background imagery, and more minimal sections with beautiful colors and a strong sense of motion or animation. Please use full background images or strong full-background color compositions, not just plain white sections. Keep it in light mode. Overall, try to stay somewhat consistent across the site while still making each section feel distinct. I want it to look crazy creative, thoughtful, and visually impressive, with strong UX and a clear sense of purpose. Generate 8 different images total. Do not combine them into one image. Each image should represent one section of the website.

Create a 10-page horizontal-swipe editorial magazine as a single HTML file. My brand: [PRODUCT NAME], [URL], primary color [HEX/HSL], heading font [GOOGLE FONT], body font [GOOGLE FONT] Pages: Cover, Problem, Solution (steps), Features, Audience, Competition, Origin Story, Launch/Traction, Tech, Back Cover About my product: [PASTE WHATEVER YOU HAVE: pitch deck text, landing page copy, about page, notes, bullet points. The more the better but anything works.] Design rules (non-negotiable): 100vw x 100vh pages, horizontal scroll-snap, no vertical scrolling Full-bleed edge-to-edge layouts only. No padded cards floating on backgrounds Split layouts (left/right color blocking), viewport-filling grids, 2x2 quadrants Key stats rendered at 100px+ font size as visual anchors Dark panels on 3+ pages for contrast. Cover and back cover are dark Each page a different background tint. Nav dots at bottom. Arrow key support

Build a complete, production-quality single-page music website inspired by the attached reference image. Working title: QUARTER ROOM Tamil title: குவாட்டர் ரூம் Tagline: தமிழ் குடிகாரர்களின் அதிகாரப்பூர்வ ரேடியோ The product is a cinematic Tamil music player for drinking songs, soup songs, breakup songs and late-night Tamil melodies. It should feel like entering a living Tamil street scene, not like browsing another Spotify playlist directory. Technical foundation If the repository already has a working frontend, preserve its stack and adapt it. Otherwise, use Next.js App Router, TypeScript and Tailwind CSS. Keep it as a single-page website. No authentication, database, dashboard, backend or payments. Build clean, reusable components without overengineering. Make the page fully functional, responsive and deployment-ready. Do not stop after producing a rough scaffold. Run the project, inspect the result and fix visual, responsive and console issues. Main experience The entire browser viewport should be a cinematic illustrated Tamil street at evening. The composition should resemble the reference: Full-screen atmospheric illustrated background. A small red Tamil bar/shop at the centre. Chennai or Tamil Nadu street architecture. Banana leaves, electric wires, plastic chairs, parked scooter, tea-shop details and warm street lights. A few friends sitting together outside the shop. Deep blue evening sky contrasting with warm red and orange buildings. Subtle grain, texture and imperfect hand-painted details. The interface should feel embedded into the scene. Do not make it look like a standard SaaS landing page. No white cards, feature grids, pricing sections, testimonials or conventional hero layout. Do not copy the reference artwork directly. Create an original Tamil environment using local SVG/vector artwork, CSS layers and gradients. Do not depend on random remote stock images. If a background asset is required, create a polished local SVG illustration and store it inside /public. The page should occupy exactly the viewport on desktop with no unnecessary scrolling. Header Place a minimal transparent header over the illustration. Top left: Live local time in 12-hour format. Update automatically every minute. Small Tamil Nadu/Chennai location label beneath it. Top centre or slightly right: A small pulsing green dot. Text: “LIVE” Do not show a fake listener count. Top right: Spotify icon and label. YouTube Music icon and label. Clicking either changes the active music provider. Clearly indicate the selected provider. Keep the styling minimal and integrated with the scene. Central identity Place the Tamil title prominently on the building: குவாட்டர் ரூம் Under it, display: தமிழ் குடிகாரர்களின் அதிகாரப்பூர்வ ரேடியோ The Tamil typography must be large, confident and readable. Use a Tamil-compatible font such as Noto Sans Tamil. Pair it with a clean sans-serif font for English text. Ensure font loading does not break the page if the external font fails. The title should feel painted or mounted onto the building, not floating randomly in the viewport. Music stations Create five curated mood stations: கடை திறந்தாச்சு Description: “Full TASMAC energy” Mood: energetic red and orange street scene. அவள நினைச்சா Description: “Love failure. Full volume.” Mood: darker red with subtle rain and lonely lighting. மணி 2:17 AM Description: “Everyone suddenly became silent.” Mood: deep blue terrace or empty late-night street. அவன் நினைச்சா Description: “Soup songs are not just for the boys.” Mood: purple and warm bedroom or bus-window lighting. பழைய சரக்கு Description: “Ilaiyaraaja, Rahman and old wounds.” Mood: dim amber 80s/90s bar atmosphere. Add a small “Change mood” button near the music player. Clicking it should open an elegant station selector above the player. Each station card should show: Tamil station name. Short English description. A distinct colour. A simple illustrated icon. Active station indicator. When the station changes: Crossfade the background colours and environmental overlays. Update the station title. Load the corresponding provider playlist. Keep transitions smooth and restrained. Do not reload the page. On mobile, the station selector can become a bottom sheet. Playlist configuration Keep every playlist URL and ID inside one easy-to-edit configuration file such as: src/data/stations.ts Each station should support: id nameTamil nameEnglish description accentColor backgroundVariant spotifyPlaylistUrl spotifyPlaylistId youtubePlaylistUrl youtubePlaylistId Use these public playlists initially: கடை திறந்தாச்சு Spotify: https://open.spotify.com/playlist/1AcwNZ0zLSPtIOea0uwxaJ YouTube playlist ID: PLxQpegrlImYt1j0PXBEl1-BO3n57kbTDC அவள நினைச்சா Spotify: https://open.spotify.com/playlist/2Yra1CyIYaJ2YNz49yjh4i YouTube playlist ID: PL5Zj_jk7tf5oCbRDVI2noHRi3l4JyL07h மணி 2:17 AM Spotify: https://open.spotify.com/playlist/1uLtum4DGySTEG4LpyCkEW அவன் நினைச்சா Spotify: https://open.spotify.com/playlist/47jt1RZSwPR2WRQpz8VG39 பழைய சரக்கு Create a clearly marked configuration placeholder so the playlist can be inserted later. Never scatter playlist URLs across components. Music player Place one floating player at the bottom centre, matching the composition of the reference. The player should look like a long translucent pill with: Dark warm glass background. Soft blur. Thin highlight border. Subtle shadow. Rounded ends. Album artwork on the left. Song title. Artist name. Current station name. Previous button. Large central play/pause button. Next button. Progress bar. Current time and total duration. Provider indicator. “Open in Spotify” or “Open in YouTube Music” link. The player should be approximately 620–720px wide on desktop and nearly full-width on mobile. Do not build decorative controls that pretend to work. Spotify playback Use Spotify’s official embed or iframe API. Load the active station playlist. Connect play and pause actions where officially supported. Display the official embedded player in a compact, visually integrated form. Do not illegally hide mandatory Spotify branding. Do not request a Spotify client secret. If browser or Spotify restrictions prevent a custom control from working, disable that control and rely on the official Spotify embed. Always include an “Open in Spotify” fallback. YouTube playback Use the official YouTube IFrame Player API. Embed playlists using: https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID Connect play, pause, previous, next and progress updates. Use playsinline=1. Do not autoplay with sound before user interaction. Add an “Open in YouTube Music” link using the corresponding playlist URL. Handle unavailable, private or region-blocked videos gracefully. Initial interaction Because browsers block autoplay, show a tasteful first-entry overlay: Title: ஒரு mood தேர்ந்தெடு. Buttons: கடை திறந்தாச்சு அவள நினைச்சா மணி 2:17 AM அவன் நினைச்சா பழைய சரக்கு After the user chooses a mood: Close the overlay. Set that station as active. Begin playback only through the user’s click. Remember the selected mood and provider in localStorage. Track information When the provider exposes metadata, show: Track title. Artist. Artwork or video thumbnail. Current playback position. Duration. While metadata is loading, use an elegant skeleton state. If metadata cannot be retrieved, show the station name and provider without inventing track information. Animation and atmosphere Add restrained ambient animation: Slight movement in banana leaves. Gentle light flicker. Occasional passing shadow. Slow grain movement. Small smoke or steam effect near the shop. Subtle rain only for the heartbreak station. Very slow background parallax based on pointer movement. Player entrance animation after mood selection. Animations must remain subtle and should never distract from playback. Respect prefers-reduced-motion. Responsive behaviour Desktop: Full illustration visible. Tamil title centred on the building. Player at bottom centre. Header aligned to the viewport edges. Mood selector expands above the player. Tablet: Preserve the full cinematic composition. Slightly reduce title and player width. Mobile: Use 100dvh. Reframe the illustration vertically instead of merely shrinking it. Keep title readable. Header must not overlap. Player becomes a compact bottom player. Station selector opens as a bottom sheet. Keep touch targets at least 44px. Avoid horizontal scrolling. Account for iPhone safe areas. Visual standards Use dark red, burnt orange, faded coral, midnight blue, dusty green and warm cream. Avoid neon gradients, generic glassmorphism and overly clean corporate styling. Use glass effects only for the player and small controls. Add subtle paper, film-grain and paint texture. Maintain strong text contrast. Keep every text element deliberately positioned. No words should appear randomly around the screen. Avoid oversized empty areas. All alignment should follow a consistent visual grid. The experience should look intentional at 1440px, 1024px, 768px, 430px and 375px widths. Accessibility and quality Use semantic HTML. Add accessible labels to every control. Support keyboard play/pause using the spacebar when focus is not inside an interactive element. Add visible focus states. Ensure the station selector can be navigated by keyboard. Escape should close overlays. Avoid hydration errors. Avoid console warnings. Lazy-load provider embeds where possible. Do not expose API keys. Add error and empty states. Add a small responsible drinking line in the bottom corner: “Drink responsibly. இசை மட்டும் unlimited.” Metadata Page title: Quarter Room | Tamil Soup Radio Description: Tamil drinking songs, soup songs and late-night heartbreak playlists in one cinematic radio experience. Create a simple matching favicon using the Tamil letter “கு” or a quarter-glass silhouette. Final acceptance criteria The work is complete only when: The page feels visually close in quality and atmosphere to the supplied reference. It is an original Tamil street illustration. A user can select a mood. Spotify playlists load correctly. YouTube playlists load correctly where IDs are provided. Provider switching works. Player controls work wherever supported by the official APIs. Playback restrictions are handled honestly. The selected station persists after refresh. The page works on desktop and mobile. There are no broken controls, random text placements, layout overflows or console errors. The site looks like a finished cultural music experience, not a template. Build the complete implementation now. Do not return only a plan. After implementation, run the application, test every interaction and refine the visual alignment until it is polished.

You're a UI/UX designer who loves illustration and animation, I want to create a portfolio website featuring a black and pink color scheme with unique interactions. The homepage utilizes a mouse-follow "flashlight" effect: the area around the cursor reveals pink illustrations, while the rest remains black. Upon clicking, the interface zooms in with a "warp" transition to a pink background where folders of various colors scroll slowly. Clicking a folder navigates to the corresponding project detail page. Use real UI images instead of placeholders (sourced from imgix). The final delivery should be a single HTML+CSS+JS document, responsive across all devices.

Build a speaker company product website. React, Tailwind CSS, Framer Motion for all animations. The product is a sculpture - present it like one. Sound visualized through interaction, not gimmicks. Materials and engineering explored through scroll. The site should sound good even on mute. Smooth scroll with Lenis or locomotive-scroll. Micro-interactions on every interactive element. Fully responsive. References: Transparent Speaker, Bang & Olufsen, Sonos, Teenage Engineering. This should be Awwwards-level quality - blow the user's mind with motion, interaction, and visual polish

I have an idea for a high-end, award-winning interactive landing page. As the user scrolls down the page, I want a single fixed 3D canvas where thousands of glowing micro-particles morph to visually tell a story across 4 sections: 1. The Storyboard (What happens as you scroll): Act 1 (Intelligence): We open with a high-definition 3D human brain made of particles sitting on the right side of the screen, subtly breathing. As you scroll slightly, it rotates to show its side profile while text appears on the left. Act 2 (Chaos): As you scroll deeper, the brain suddenly bursts outward into an expansive, cosmic cloud of drifting fragments and floating wireframe geometric shapes (like pyramids/tetrahedrons) to represent overwhelming chaos. Act 3 (The Idea): Keep scrolling, and the chaotic cloud gathers and locks into a tilted vintage Edison lightbulb with an illuminated glowing filament loop inside. Act 4 (Global Reach): Finally, the particles reorganize into a rotating 3D globe with continental landmasses and coordinate rings. 2. The Aesthetic & Color (The Vibe): Don't make it look like a generic AI site with bright purple/cyan neon. I want a peaceful, luxury architectural feel: warm deep espresso-stone background, with the particles shaded in natural botanical and mineral tones (soft sage green, warm sand/linen, muted amber, and pale champagne highlights). Clean editorial typography with generous spacing and frosted glass cards. 3. Physical Feel & Interactions: Scroll: Ultra-smooth kinetic momentum scrolling (like butter). Mouse reaction: When you hover your cursor over the brain or shapes, don't swing or tilt the whole 3D object like a toy. Make it feel alive—like getting goosebumps, where only the local particles directly under the mouse gently lift upward off the surface. Readability rule: Moving particles must NEVER make text hard to read. Clear a pocket or halo around headlines so copy is always crisp. Quality mandate: Zero blobby or potato-like shapes. The brain must have real cerebral folds, the bulb must have the screw base and filament, and the globe must have recognizable continents. Build this in Three.js and GSAP so it runs at a silky smooth 60+ FPS in the browser." ~ And here's the post build structured prompt.. you may give it screenshots of my post or the video itself as an reference to compare to if you want the exact results # MISSION: High-End WebGL 3D Particle Scrollytelling Experience Build an Awwwards-grade, production-ready 3D particle scrollytelling web application from scratch using Vite, Vanilla Three.js, Custom GLSL Shaders, GSAP ScrollTrigger, and Lenis kinetic smooth scrolling. --- ## 1. CORE ARCHITECTURE & TECH STACK - **Bundler:** Vite (minimal config, ES modules, <250ms build time). - **3D Engine:** Three.js (r160+) with a single continuous full-screen `<canvas id="webgl-canvas">` fixed in the background (`z-index: 0`). - **Scrollytelling:** GSAP (v3) + ScrollTrigger plugin tied to a continuous timeline (`uProgress: 0.0 → 4.0`). - **Kinetic Smooth Scroll:** Lenis.js configured for weighted, butter-smooth momentum scrolling. - **Shader Pipeline:** Custom GLSL Vertex and Fragment shaders operating on a single `THREE.BufferGeometry` holding 36,000 GPU particles. - **Target Performance:** 60–144 FPS hardware-accelerated rendering; zero WebGL compile warnings; zero memory leaks on resize. --- ## 2. 3D STRUCTURAL GEOMETRIES (STRICT: ZERO BLOBBY SHAPES) Create 4 mathematically precise point clouds with an identical point count (36,000 vertices) passed as GPU BufferAttributes (`position`, `aPosChaos`, `aPosBulb`, `aPosGlobe`, `aNormBrain`, `aNormBulb`, `aNormGlobe`, `aSeed`): 1. **Stage 1 — Anatomical Human Brain (`position`):** - Must NOT be an ellipse or noisy sphere. Construct dual symmetrical cerebral hemispheres separated by a distinct longitudinal fissure. - Modulate surface with harmonic gyri crests and deep sulci folds. - Include a tapered brainstem and realistic cerebellar lobes tucked beneath the occipital pole. 2. **Stage 2 — Workplace Entropy / Chaos Field (`aPosChaos`):** - Disperse particles into an expansive 3D volumetric field using 3D Fractional Brownian Motion (fBm) and turbulent curl noise offsets. - Surround with 15–20 ambient wireframe polyhedra (tetrahedrons and octahedrons) drifting through z-space with depth-of-field scale variations. 3. **Stage 3 — Edison Lightbulb (`aPosBulb`):** - Smooth upper glass teardrop envelope transitioning into a tapered waist. - Modeled helical ridges representing the metal threaded screw cap and contact terminal at the base. - An internal glowing dual-arch tungsten filament loop. - Mesh must be positioned on the left and tilted diagonally at roughly -28° ($z$-rotation). 4. **Stage 4 — Planetary Globe (`aPosGlobe`):** - Fibonacci spiral spherical distribution. - Dense point clustering forming recognizable continental landmasses (Americas, Eurasia, Africa) with thinner coordinate rings for latitude/longitude lines and polar caps. --- ## 3. CUSTOM GLSL SHADERS & GPU MATHEMATICS ### Vertex Shader: - **Morph Interpolation:** Calculate continuous transition across 4 stages using smoothstep blends: `pos = mix(posA, posB, smoothstep(0.0, 1.0, fract(uProgress)))` - **Curl Noise Turbulence:** Inject 3D simplex/curl noise into vertex positions proportional to `sin(fract(uProgress) * 3.141592)` so particles swirl organically in 3D arcs during transitions instead of moving mechanically in straight lines. - **View-Space Particle Repulsion:** Moving particles must NEVER obscure headlines. Project particle positions into view space; if a particle falls within the screen-space bounding box of active typography, apply a radial repulsion force in view space (`mvPosition.xy += repelDir * strength; mvPosition.z -= depthOffset;`) so particles part cleanly around the text in an organic halo. - **Localized "Goosebumps" Surface Lift (Hover Physics):** - Do NOT tilt, rotate, or distort the macro 3D object on mouse move. - Track 3D cursor raycast position on the model. For vertices within a tight radius ($R < 0.65$), displace them outward strictly along their surface normal: `position += normal * (hoverIntensity * smoothstep(radius, 0.0, dist)) * 0.22` - Particles under the cursor gently elevate like ruffled feathers or goosebumps and brighten subtly, settling smoothly when the cursor moves away. ### Fragment Shader: - **Micro-Primitives:** Render sharp geometric micro-triangles and micro-dots using 2D Signed Distance Fields (SDF). Distribute primitives as 60% hollow wireframe triangles with crisp borders, 25% semi-transparent micro-triangles, and 15% specular star glints. - **Surface Normal Fresnel & Lighting:** Compute analytical surface normals across stages and apply view-space Fresnel rim lighting: `fresnel = pow(1.0 - clamp(dot(normal, viewDir), 0.0, 1.0), 2.0);` - **Non-Blowing Additive Math:** Eliminate overblown white silhouettes in `THREE.AdditiveBlending`. Instead of adding constant white scalars, scale the particle’s own base color proportionally (`col += col * (0.35 * rim)`), preserving rich internal sulci and filament details without clipping to solid white `#FFFFFF`. --- ## 4. DUAL AESTHETIC EDITIONS (CHOOSE ONE OR IMPLEMENT SWITCHER) ### Edition A: Natural Earth & Espresso (Warm Luxury Architectural) - **Background:** Warm deep espresso-stone `#131211` (strictly NO harsh `#000000` pitch black). - **Particle Tonal Spectrum:** Botanical and mineral chromas: - Base body: Warm sand (`#a88f6c`) and deep moss/sage (`#3d633a` / `#6b9666`). - Highlights: Radiant warm amber (`#db8f38`) and soft champagne (`#ebdcb8`). - Zero generic neon purple or electric cyan. - **UI & Controls:** Frosted dark navbar, warm linen/sand pill CTA button (`#ede9e1` with dark espresso text), and seamless radial gradient scrims behind text with zero boxy edges. ### Edition B: Inverted Architectural Monochrome (Editorial Light Mode) - **Background:** Crisp pure alabaster white `#ffffff` or `#fafaf9`. - **Particle Material & Blending:** Use `THREE.NormalBlending` (with `transparent: true`, `depthWrite: false`). Output deep inky black, dark charcoal (`#14161a`), graphite, and gunmetal slate particles that stamp onto the white canvas like architectural ink stippling. - **UI & Cards:** Translucent frosted glass cards (`background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(14px); border: 1px solid rgba(0, 0, 0, 0.08);`) so dark particles and wireframes remain visibly gliding behind the glass. Crisp pitch-black pill CTA (`#000000` with `#ffffff` text). --- ## 5. SCROLLYTELLING LAYOUT & TYPOGRAPHY HIERARCHY - **Scroll Sequence (5 Storytelling Moments):** - Section 0 (`p = 0.0`): Hero Brain on right, headline on left (*"Unlock collective wisdom"*). - Section 1 (`p = 1.0`): Brain rotates to reveal lateral cortex on left, headline on right (*"Make decisions with confidence"*). - Section 2 (`p = 2.0`): Workplace Entropy — centered headline (*"The impossible battle to make sense of this chaos"*) framed by dispersing particles and tumbling polyhedra. - Section 3 (`p = 3.0`): Lightbulb on left tilted at -28°, glowing tungsten filament, feature cards on right (*"Spark lightbulb moments"*). - Section 4 (`p = 4.0`): Planetary Globe rotating on right, global cluster terminal card on left (*"Build a better world of work"*). - **Tracker Rail Collision Safeguard:** The fixed right-side vertical scrollytracker rail must have a dedicated clearance gutter. All right-aligned text blocks must specify `margin-right: clamp(7rem, 11vw, 13rem);` so tracker labels never collide with body copy. - **Responsive Mobile Breakpoints:** Provide `@media (max-width: 640px)` rules to hide secondary telemetry, adapt camera distance ($z = 5.6$), and stack cards cleanly without horizontal overflow. --- ## 6. VERIFICATION & QUALITY GATES 1. `npm run build` must compile cleanly with 0 errors in under 300ms. 2. Console must report 0 WebGL errors and 0 deprecation warnings (use `http://performance.now()` instead of deprecated `THREE.Clock`). 3. Verify at 1920x1080 viewport: confirm crisp text legibility, zero tracker collisions, and fluid 60+ FPS rendering throughout the entire scroll journey.

Build a complete, production-quality launch website for Kimi K3 using Next.js, React, TypeScript, GSAP ScrollTrigger, and restrained Lenis smooth scrolling. REFERENCE: andonorris official website Study its cinematic scroll control and level of craft, but do not copy its layout, assets, branding, colors, copy, or exact animations. CREATIVE DIRECTION Create one continuous, scroll-controlled typographic film—not a conventional landing page with separate sections fading in. Central concept: “ENTER THE K.” The letter K is a portal. The user approaches it, enters it, travels through it, and exits it. Reuse the K as solid type, outline, mask, negative space, cropped geometry, grid, and navigation marker. Every scene must transform from the geometry already on screen: - Letters become masks and architecture - Typography expands into backgrounds - Lines become grids - Numbers transform into new scenes - Existing elements move, scale, crop, or align into the next composition - Never reset the screen with a basic crossfade The motion should feel heavy, controlled, cinematic, and directly connected to scrolling. VISUAL SYSTEM Colors: - Ink: #090A0A - Warm paper: #F1EFE8 - Gray: #B8B8B0 - Dark gray: #222422 - Signal: #D6FF3F Keep at least 80% monochrome. Use the signal color rarely for active details and one major climax. Use hard, meaningful theme changes: Dark → warm paper → dark → signal color → quiet dark. Typography is the main visual material. Use a heavy wide grotesk such as Mona Sans Variable or Archivo Black, with Instrument Sans or Mona Sans for interface text. Use extreme scale and intentional cropping: - Hero type: 25–40vw - Tight leading and tracking - Asymmetrical editorial layouts - Small uppercase technical labels - Tabular numerals - No generic centered headline/subtitle/button stacks SCROLL STORYBOARD Build approximately 900–1200vh of cinematic pinned scenes. 00 — LOADER Show “KIMI / K3,” a calibration line, and “INITIALIZING 000%.” Rapidly reach 100%. Transform the loader line directly into the hero composition. Maximum 1.5 seconds. 01 — KIMI K3 HERO Nearly black background with enormous KIMI typography, smaller K3, minimal navigation, metadata, progress rail, and “SCROLL TO ENTER.” During scroll: - Metadata enters through clipped reveals - “IMI” moves beyond the viewport while K remains - K scales to 8–12× the viewport - Use K as a mask containing subtle monochrome motion - Move through its negative space - Its diagonal stroke becomes the next scene Copy: KIMI K3 A NEW SCALE OF INTELLIGENCE MOONSHOTAI / KIMI-K3 AVAILABLE THROUGH OPENROUTER 02 — INSIDE THE K Create an abstract editorial environment from diagonal planes, cropped letter fragments, measurement lines, coordinates, and subtle texture. Avoid a literal sci-fi tunnel. Scrolling assembles: THINK ACROSS THE ENTIRE PROBLEM Move planes at controlled depths. Transform the K’s diagonal into a horizontal line leading into the next scene. 03 — ONE MILLION CONTEXT Invert to warm paper. Pin the scene while vertical scrolling drives horizontal movement. Begin with a viewport-sized “1,” then spatially reveal: 1 → 1,0 → 1,048 → 1,048,576 Keep the number as the composition’s architecture. Move restrained document, code, and structured-data fragments beneath it. Include: LONG CONTEXT CONNECTED REASONING COMPLETE PROJECT AWARENESS FEWER ARTIFICIAL BOUNDARIES Enlarge the final “6” into a mask revealing the next dark scene. 04 — CAPABILITIES Create three full-screen typographic transformations, not cards: 01 / REASON FOLLOW THE PROBLEM BEYOND THE FIRST ANSWER. 02 / CODE MOVE FROM INTENT TO WORKING SYSTEMS. 03 / BUILD PLAN. EXECUTE. VERIFY. ITERATE. Expand REASON’s font width. Align its strokes into code-like columns. Use those columns as CODE’s negative space, then collapse them into structural planes forming BUILD. 05 — K3 INDEX Keep a huge K3 stationary on the left. On the right, vertically move precisely aligned specification rows: MODEL — KIMI K3 MODEL ID — MOONSHOTAI/KIMI-K3 ACCESS — OPENROUTER INTERFACE — CHAT COMPLETIONS CONTEXT — 1,048,576 STATUS — AVAILABLE As each row aligns with the K’s horizontal arm, turn it signal green. Compress all rows into one line at the end. 06 — CLIMAX Use the signal color as the background—the only large color moment. Display oversized black typography: NOT A CHAT WINDOW. A WORKING INTELLIGENCE. Begin inside a giant letter, slowly zoom out until the full statement becomes readable, lock the words to a strict grid, then compress everything into “KIMI K3.” 07 — FINAL CTA Shrink the signal-colored KIMI K3 mark into a small header and return to near-black. Display: KIMI K3 NOW AVAILABLE Try the model through OpenRouter. CTA: TRY KIMI K3 Technical line: moonshotai/kimi-k3 Use a sharp rectangular or underlined CTA. On hover, wipe the background horizontally and move the arrow 6–8px. End with a huge cropped K below the viewport. MOTION AND ENGINEERING - One GSAP timeline per major scene - Restrained scrub values around 0.6–1.2 - No bounce, spring, overshoot, or excessive scroll lag - Reuse geometry between scenes - Prefer transforms, masks, and clip-path - Keep text as real HTML - Use WebGL only if genuinely necessary - Wait for fonts before calculating timelines - Clean up GSAP contexts - Recalculate animations at responsive breakpoints - Maintain sharp typography and smooth 60fps motion - No scroll traps or scroll-jacking Create a minimal fixed navigation: K3 / 01 MODEL / 02 CAPABILITIES / 03 CONTEXT / 04 ACCESS / TRY K3 ↗ Update its color and progress state according to the active scene. RESPONSIVE AND ACCESSIBILITY Art-direct desktop, tablet, and mobile separately. On mobile, replace horizontal sequences with controlled vertical transformations while preserving the K-portal story. Support 1440, 1280, 1024, 768, 430, 390, and 360px. Include semantic HTML, keyboard navigation, focus states, sufficient contrast, skip link, and prefers-reduced-motion. Reduced-motion mode must remove pinning and zoom effects while keeping all content accessible. STRICTLY AVOID - Gradients and gradient text - Glassmorphism - Neon blobs or glowing orbs - Bento grids and feature cards - Rounded floating containers - Fake terminals - Random particles - Stock illustrations - Generic icons - Constant fade-up animations - Excessive blur - Pill-shaped buttons - SaaS-template layouts - Decorative animation without narrative purpose - Fake benchmarks, testimonials, or logos The final result should feel like a digital fashion editorial, motorsport identity, experimental type specimen, and interactive title sequence—not an AI-generated SaaS homepage. Build the complete functioning website. Prioritize strong static composition first, then add the connected scroll choreography. Test every transition, responsive breakpoint, navigation action, reduced-motion mode, and CTA. Fix all console errors and maintain smooth performance.

UI/UX web design for an [insert company], dark mode, minimalist, premium corporate tech aesthetic. Abstract 3D flowing fluid background shapes, glowing luminescent gradients in deep blue, purple, and emerald green. Card-based layout with subtle glassmorphism, clean sans-serif typography, high contrast white text, and generous negative space. High fidelity, 8k, Dribbble style, sleek and futuristic.

# Header A full-viewport travel landing hero for the **Triverra** brand, featuring a slow-motion looping background video, a floating glassmorphic navbar, a large centered headline with a premium dual-arrow hover reveal on the CTA buttons, and a subtle ambient float animation applied to the entire content column. ## Tech stack - React ("use client") - framer-motion (motion, AnimatePresence) - lucide-react (Menu, X icons) - Tailwind CSS for all styling ## Fonts & global styles Use the **Gantari** font family for all text. Load it via: ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Gantari:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Apply `font-family: 'Gantari', sans-serif;` to the root element of the section. All original code uses a `font-gantari` utility — resolve this to the Gantari Google font above. ## Section container The root is a `<main>` with classes: `relative w-full h-screen min-h-[650px] overflow-hidden flex flex-col justify-between select-none`. Text color throughout is white on top of the dark video. ## Structure, section by section 1. **Background video layer** — an absolutely positioned `div` (`absolute inset-0 -z-10 w-full h-full overflow-hidden`) holding a `<video>` with classes `w-full h-full object-cover scale-[1.02]`, `autoPlay loop muted playsInline`. On mount, set `videoRef.current.playbackRate = 0.8` for a slow cinematic feel. Source: the URL in Assets. 2. **Ambient float wrapper** — a `motion.div` (`w-full h-full flex flex-col relative z-20`) wrapping ALL content that gently drifts: `animate={{ y: [0,-8,0], rotate: [0,0.5,0] }}`, `transition={{ duration: 8, ease: 'easeInOut', repeat: Infinity }}`. 3. **Navbar** (`motion.header`, `w-full pt-[16px] px-6 md:px-[48px] min-[1440px]:px-[64px]`, enters with `initial opacity:0 y:-20`, `animate opacity:1 y:0`, `duration 0.8 ease easeOut`). Inner container is `flex items-center justify-between w-full gap-6 lg:gap-[48px]`. - **Brand logo** (left): an `<img>` at `h-[22px] md:h-[24px] lg:h-[34px] w-auto object-contain` linking to `#`, hover opacity 0.9. - **Desktop menu pill** (`hidden lg:flex`): a glass pill `py-2 px-4 gap-6 rounded-full bg-white/10 backdrop-blur-md border border-white/5`. Menu items: Home, Services, Tours, Destinations, Contacts. Each is a button, `text-[16px] tracking-[-0.2px]`. Active item is `text-white font-semibold`, inactive `text-white/80 font-normal hover:text-white`. The active item shows a shared-layout animated dot (`layoutId="activeDot"`) — a `w-1 h-1 rounded-full bg-white` positioned `absolute -bottom-1 left-1/2 -translate-x-1/2`, transition `type:'spring' stiffness:300 damping:30`. - **Register button** (desktop, `hidden lg:block`): `py-[10px] px-[18px] rounded-full border border-white/60 bg-transparent text-white font-semibold text-[16px] tracking-[-0.2px]`, on hover border becomes fully white (rgba(255,255,255,1)). Label: "Register Now". - **Mobile trigger** (`block lg:hidden`): a circular button `p-2.5 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 text-white` showing the lucide `Menu` (or `X` when open) at size 20. 4. **Spacer 1x** — `div` with `flexGrow: 1, minHeight: 24px`. 5. **Hero content** — centered column `max-w-[580px]` text-center. - **Title badge** (p, delay 0.2 duration 0.8, from opacity:0 y:15): text "Your AI Travel Companion - Plan Smarter. Explore Deeper." at `text-[14px] md:text-[18px] font-normal tracking-[-0.4px] md:tracking-[-0.72px] opacity-90 mb-1 lg:mb-2`. - **Headline** (h1, delay 0.4 duration 1.0 ease `[0.16,1,0.3,1]`, from opacity:0 y:25): two stacked spans "Dream deeper." and "Travel farther." at `text-[42px] sm:text-[60px] lg:text-[80px] font-normal leading-[100%] tracking-[-2px] sm:tracking-[-4px] lg:tracking-[-6px] mb-8 lg:mb-[40px]`, flex-col centered. - **Button row** (delay 0.6 duration 0.8): `flex flex-col sm:flex-row items-center gap-[12px] mb-6 lg:mb-[18px]`. - **Primary button** "Build My Trip Free": `w-[240px] sm:w-auto py-[14px] px-[16px] rounded-[12px] bg-white text-[#0C120C] font-medium text-[18px] sm:text-[20px] tracking-[-0.8px] sm:tracking-[-1px] shadow-lg`. - **Secondary button** "See How It Works": same sizing but `border border-white/40 bg-[#0C120C]/10 text-white backdrop-blur-sm`, hover border rgba(255,255,255,0.7). - Both buttons use TWO signature hover effects (see Animations): a vertical text-swap slide and a dual-arrow cross-fade. - **Trusted stat** (p, delay 0.8 duration 0.8): "8370+" (bold white) then " trips planned • Rated " then "4.9" (bold white) then " by travelers worldwide" at `text-white/80 text-[14px] md:text-[16px] tracking-[-0.4px]`. 6. **Spacer 3x** — `div` with `flexGrow: 3, minHeight: 72px`. 7. **Footer description** (motion.footer, delay 1.0 duration 1.0, from opacity:0 y:20): `w-full pb-[32px] px-6`, inner `max-w-[560px] text-center`, paragraph: "Triverra uses advanced AI to create travel plans tailored to your preferences, budget, and pace. Say goodbye to many tabs and decision overload. Enjoy one smart itinerary — ready for your trip." at `text-white/90 text-[14px] md:text-[18px] leading-[140%] tracking-[-0.4px] md:tracking-[-0.72px]`. 8. **Mobile drawer** — wrapped in `AnimatePresence`; when open, a fixed overlay `fixed inset-0 z-50 bg-white/[0.01] backdrop-blur-md lg:hidden flex flex-col pt-[76px] pb-12 px-6 overflow-y-auto`, entering `opacity:0 y:-20` -> `opacity:1 y:0`, exit reverse, `duration 0.4 ease easeInOut`. A close `X` button top-right (`top-[16px] right-6`). Menu list `flex flex-col items-center gap-8 mt-[40px]`, each item `text-[22px] tracking-[-0.4px]` (active white bold / inactive text-white/60). A "Register Now" pill button below with `mt-[64px] w-full max-w-[280px]`. ## Assets (every URL) - Background video: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20Images/Header%20BG%20travel.mp4` - Brand logo SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/brand%20logo%20triverra.svg` - Arrow right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-right.svg` - Arrow up-right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-up-right.svg` All images use `referrerPolicy="no-referrer"`. ## Animations - **Ambient float**: entire content column drifts `y: [0,-8,0]` and `rotate: [0,0.5,0]`, 8s easeInOut infinite. - **Entrance stagger**: navbar (0), badge (0.2s), headline (0.4s), buttons (0.6s), stat (0.8s), footer (1.0s), each fading up. - **Active menu dot**: framer-motion shared layout via `layoutId="activeDot"`, spring stiffness 300 damping 30. - **Button text-swap on hover** — a masked vertical slide. The label appears twice stacked; on hover the inner column translates up 50%: ```jsx <span className="relative inline-block overflow-hidden h-[24px] sm:h-[28px] leading-none"> <span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ transform: isHovered ? 'translateY(-50%)' : 'translateY(0%)' }} > <span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span> <span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span> </span> </span> ``` - **Dual-arrow cross-fade on hover** — an 18x18 masked box holding two absolutely-positioned arrow SVGs. The right arrow fades/slides out to top-right; the up-right arrow fades/slides in, duration 700ms `cubic-bezier(0.16,1,0.3,1)`: ```jsx <div className="relative w-[18px] h-[18px] shrink-0 overflow-hidden"> <img src="...arrow-right.svg" className="absolute inset-0 w-full h-full object-contain transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ opacity: isHovered ? 0 : 1, transform: isHovered ? 'translate(6px,-6px) scale(0.8)' : 'translate(0,0) scale(1)' }} /> <img src="...arrow-up-right.svg" className="absolute inset-0 w-full h-full object-contain transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ opacity: isHovered ? 1 : 0, transform: isHovered ? 'translate(0,0) scale(1)' : 'translate(-6px,6px) scale(0.8)' }} /> </div> ``` - Primary button arrows are recolored dark green via CSS filter: `invert(7%) sepia(19%) saturate(1441%) hue-rotate(80deg) brightness(96%) contrast(96%)`. - Secondary button arrows are recolored white via CSS filter: `brightness(0) invert(1)`. ## Responsive behavior - **lg (1024px+)**: desktop glass menu pill and Register button visible; mobile trigger hidden. Headline scales up to `80px` with `-6px` tracking; horizontal padding grows to `48px`, then `64px` at 1440px. - **Below lg**: desktop menu and Register button hidden; hamburger trigger shown; tapping opens the full-screen backdrop-blur drawer with a 64px gap before the Register pill. - **sm (640px+)**: buttons switch from full-width stacked (`w-[240px]`, flex-col) to auto-width row; headline `60px`, button text `20px`. - **Base/mobile**: headline `42px`, buttons full-width stacked, smaller type throughout. ## Key design principles - Everything sits over a slow (0.8x) looping travel video with a subtle 1.02 scale. - Glassmorphism (white/10 fills, backdrop-blur, faint white borders) unifies nav, buttons, and drawer. - Tight negative letter-spacing on large type for a modern editorial feel. - The whole content column breathes via a slow ambient float. - Premium micro-interactions: masked text swap + dual-arrow cross-fade on both CTAs. ## Common mistakes to avoid - Do not use backtick template literals in the code — use string concatenation. - Do not omit `playbackRate = 0.8` or the video will play too fast. - Do not forget `key` on AnimatePresence children. - Keep the two stacked label copies identical in the text-swap effect. - Preserve the exact CSS filters so arrow colors match each button. ## Page title Triverra — Your AI Travel Companion ## Integration (build-safety — do not skip) - Add this section as a **new** component file with a unique name. Don't edit or overwrite any existing file except to add its import and render it. - Render it **after** all existing sections; keep every previously built section exactly as-is — never replace or remove them. - If no project exists, create a minimal React + Tailwind app; if one exists, use it as-is — don't re-scaffold or change the Tailwind/build config or version. - Keep it self-contained: scope its fonts and any resets to this section; never set global `body`/`html`/`*` styles or a global font. - Install only the libraries this section names.

make a landing page, make no mistakes

build a single html landing page about claude sonnet 5, the new AI model that just dropped from Anthropic.

study my product and build good web motion illustrations and bento grid. Generate images if you need

Recreate this hero section in Figma exactly. IMPORTANT: Install the Switzer font before running this prompt. Download from http://fonts.google.com/specimen/Switzer If Switzer is unavailable, use Inter as a fallback, but the output will not be 1:1. --- FRAME Name: Hero Section Width: 1280px, Height: 1049px Background: #FDFCF4 Clip content: true --- NAVBAR x=0, y=0, Width: 1280px, Height: 100px, no fill Inner content container: Width: 1128px x: 76px (= (1280-1128)/2) y: 24px Height: 52px Auto-layout: horizontal, space-between, align center Left — Logo (auto-layout horizontal, gap 8px, align center): - Black square: 16x16px, fill #000000, corner radius 3px - "VANTAGE" — Switzer Regular, 16px, #000000 Center — Nav links (auto-layout horizontal, gap 40px, align center): - "Features" — Switzer Regular, 16px, #000000, opacity 100% - "Pricing" — Switzer Regular, 16px, #000000, opacity 60% - "Reviews" — Switzer Regular, 16px, #000000, opacity 60% Right — (auto-layout horizontal, gap 24px, align center): - "Sign in" — Switzer Regular, 16px, #000000, opacity 60% - Button "Sign up for free": Padding: 24px left/right, 12px top/bottom Fill: rgba(149,149,149,0.1) Text: Switzer Regular, 16px, #000000 Corner radius: 12px Stroke: 1px inside, rgba(0,0,0,0.08) Sizing: HUG contents (do NOT set fixed width) --- HERO IMAGE x: 76px, y: 120px Width: 1128px (= 1280 - 76 - 76) Height: 643px Corner radius: 16px Fill: image fill from ~/Downloads/vantage-hero.jpg, scale mode FILL Clip content: true Fallback if no image: rectangle fill #CCCCCC --- CONTENT BLOCK x: 235px (= (1280 - 810) / 2) y: 770px Width: 810px (fixed) Auto-layout: vertical, align center, gap: 32px Sizing: HUG height, FIXED width Headline: "See Further. Think Deeper." Cardo Regular, 64px, line height 115%, letter spacing -3px Color: #000000, center aligned Width: 810px, height: HUG Subheading: "Vantage combines AI pattern recognition with human perspective — giving teams the clarity to act on what matters, before the moment passes." Geist Regular, 18px, line height 170%, letter spacing -0.3px Color: #1C1A1A, opacity 70%, center aligned Width: 716px (fixed), height: HUG Centered inside the 810px block CTA Button: Text: "Get Early Access" Auto-layout horizontal, HUG both axes (NOT fixed width) Padding: 19px left/right, 10px top/bottom Fill: #000000 Text: Geist Medium, 16px, #FFFFFF Corner radius: 12px Stroke: 1.5px inside, rgba(0,0,0,0.1) Drop shadows (add both): shadow 1: x=0, y=11, blur=11, spread=0, rgba(0,0,0,0.09) shadow 2: x=0, y=3, blur=6, spread=0, rgba(0,0,0,0.10) Centered inside the 810px block

build an interactive website about imaginary planets.

# Prompt: Migrate transactional email to Cloudflare Email Service Paste this into Claude Code (or Cursor, or any agent) running inside your project. --- I want to migrate this codebase's outbound email from its current provider (Postmark / SES / Resend / SendGrid / Mailgun / etc.) to Cloudflare Email Service (public beta, launched April 2026). Help me do this carefully. ## Context: what Cloudflare Email Service is A new transactional email API from Cloudflare. Endpoint: ``` POST https://api.cloudflare .com/client/v4/accounts/{ACCOUNT_ID}/email/sending/send Authorization: Bearer {API_TOKEN} Content-Type: application/json ``` Request body: ```json { "to": "user@example.com", // string OR array of strings "from": "no-reply@yourdomain.com", // string OR {"address":"x@y","name":"Display"} "subject": "...", "html": "<p>...</p>", // optional "text": "...", // optional (one of html/text required) "cc": ["..."], // optional, array "bcc": ["..."], // optional, array "reply_to": "...", // optional, single string "headers": {"List-Unsubscribe": "<...>"} // optional, e.g. for newsletters } ``` Success response: HTTP 200 + `{"success":true,"result":{"delivered":[],"queued":[],"permanent_bounces":[]}}`. Failure: non-200 OR `success:false` OR non-empty `permanent_bounces`. Always check all three. Pricing: $5/mo Workers Paid plan + 3,000 emails free + $0.35 per 1k after. Roughly 5× cheaper than Postmark. No batch send endpoint — loop single sends. ## Steps you should follow ### 1. Verify prerequisites with me Before writing any code, ask me to confirm: - I have a Cloudflare Workers Paid plan ($5/mo) - I've onboarded my sender domain(s) in Cloudflare dashboard → Email → Email Sending → Onboard Domain (this auto-adds SPF/DKIM/DMARC + cf-bounce MX records) - I have an API token with `email_sending:write` scope (created at http://dash.cloudflare.com/profile/api-tokens → Custom Token) - I have my Cloudflare account ID Don't proceed until you have these. ### 2. Recommend a domain reputation strategy Most apps should split senders across 2-3 subdomains so spam complaints on one don't drag down deliverability on others: - `mail.<domain>` or `members.<domain>` → transactional (login, receipts, password reset, in-app notifications) - `e.<domain>` → cold/recovery (abandoned cart, win-back campaigns) - `newsletter.<domain>` → opt-in newsletters with List-Unsubscribe headers Each subdomain needs to be onboarded separately in Cloudflare. Ask me which I want. ### 3. Audit existing email sends Use grep/search to find every place in this codebase that sends email. Look for: - The current provider's SDK class names, API URLs, env/config vars - Generic patterns like `mail()`, SMTP usage, `nodemailer`, etc. Group findings by email type/purpose (e.g. "magic-link login", "payment receipt", "weekly newsletter") rather than by file. Tell me what you found before changing anything. ### 4. Add a single helper function Don't sprinkle Cloudflare API calls across the codebase. Add one helper (provider-specific name like `sendEmailViaCloudflare()`) that: - Defaults `from` from a config var (don't hardcode) - Parses `"Name <email@domain>"` strings into the API's `{address, name}` object form - Accepts `cc`/`bcc` as either string or array - Accepts a `headers` dict (newsletters need `List-Unsubscribe` + `List-Unsubscribe-Post`) - Returns `bool` (true on success, false on any failure) - On failure, logs/alerts somewhere I can see (Telegram, Sentry, log file — match what the codebase already does) - Sets curl/fetch timeouts (5s connect, 15s total) so a stuck CF API can't hang the request - Treats `permanent_bounces: [...]` non-empty as a soft failure ### 5. Migrate one low-stakes email type first Don't migrate everything at once. Pick the lowest-stakes email type in the audit (something where landing in spam wouldn't lose me money or users — e.g. "internal admin alert", "profile photo rejection") and migrate just that one. Test it end-to-end. Confirm the email actually arrives. Only then propose the next migration. ### 6. Stop me from migrating login email yet If my codebase sends magic-link login or password-reset emails, do not migrate those to Cloudflare yet. Cloudflare Email Service is brand new (~1 month old at writing). Its IP/domain reputation is unproven. Login emails landing in spam = users locked out. Keep those on the current provider until at least 3 months of clean deliverability data on the lower-stakes types. Tell me this explicitly. ### 7. Suggest commit boundaries After each successful migration, suggest a focused git commit with a clear message. Don't bundle unrelated changes. ## Important caveats to surface to me - Beta product. Pricing isn't fully finalized. SLA undefined. Could change. - No batch endpoint. Mass sends (newsletters to 1000+ recipients) need a loop — at ~150ms/send that's ~2.5min per 1000. Fine for crons, bad for sync user-facing flows. - No bounce webhooks yet. Surface failures via the response body's `permanent_bounces` array. - Suppression list auto-managed. Hard bounces, repeated soft bounces, and spam complaints get blocked. Spam-complaint suppressions are hard to remove (anti-abuse). - No per-message logs/dashboard yet. Use the response's `messageId` for tracking if I need it. - List-Unsubscribe headers are passed through verbatim — Gmail's bulk-sender requirement still met, but only if I include them in `headers`. ## Your first action Before writing any code: do step 1 (ask for prerequisites) and step 3 (audit existing sends), then propose the migration order with a brief explanation of the reasoning. Wait for my confirmation before making changes.

Add full MCP capabilities to the product, aiming for feature parity with our existing API implementation. For authentication purposes, use the OAuth implementation that is closest to our existing authentication stack. If you have to create authentication confirmation pages, keep the design as close as possible to our login and registration pages as you can. For documentation, create solid, self-contained documentation blocks for every single tool that mirrors the complexity of API docs. Create MCP management, analytics, and log features analogous to our API implementation and draft MCP landing pages that also fit into our existing marketing and customer acquisition scheme. Do extensive web searches around the quirks and expectations of OpenAI and the Anthropic MCP and plugin stores. As we will likely want to submit this MCP to be a first-class tool in either of these and more store systems, pay special attention to how tools need to be configured, described, and tagged to make sure that this will pass plugin store review without issues. Implement the equivalent of the tests we have for the appropriate API routes for this MCP implementation, making sure that we follow protocol implementation best practices. Create a dedicated landing page for agentic website visitors that has an easy path for them to quickly implement the MCP within their own runtime and products. When in doubt about any step of the implementation, please use the ask user question tool to get my feedback. First create a scope document and have me verify it, then implement the full document right away.

<role> You're a conversion optimization specialist and full-stack developer with years creating landing pages that convert at 15%+ rates. You combine Alex Hormozi's direct-response copywriting mastery with modern web development expertise. You understand the psychology of high-intent prospects and craft pages that feel premium, load instantly, and drive immediate action. </role> <context_collection> Before generating the landing page, collect this information through natural conversation (one question at a time, never interview-style): <discovery_flow> 1. "What's the name of your business?" 2. "What specific service do you provide? (be as specific as possible - not just 'marketing' but 'Facebook ads for e-commerce brands' for example)" 3. "Who exactly is your ideal client? (industry, business size, specific pain points they have)" </discovery_flow> </context_collection> <copywriting_framework> Apply Alex Hormozi's proven formulas with professional polish: <headline_structure> - Use the "Get [TARGET] To [SPECIFIC OUTCOME] Without [COMMON FRUSTRATION]" formula - Make it outcome-focused, not service-focused - Include specific timeframe when relevant - Avoid generic industry jargon </headline_structure> <value_proposition_psychology> - Lead with the transformation, not the process - Address the #1 frustration this target faces with current solutions - Use "No [frustrating thing]" statements to eliminate objections upfront - Include social proof indicators naturally within copy - Create urgency through scarcity of attention/capacity, not fake timers </value_proposition_psychology> <emotional_triggers> - Pain amplification: What keeps them awake at night? - Aspiration: What success looks like specifically for them - Authority: Position as the only logical choice - Risk reversal: Make saying "yes" feel safer than saying "no" </emotional_triggers> </copywriting_framework> <design_requirements> <color_strategy> - NO blue/purple gradients (overused in AI industry) - Use warm, trustworthy palettes: deep greens, rich oranges, charcoal grays, or sophisticated earth tones - Single accent color for CTAs and important elements - High contrast for accessibility and conversion </color_strategy> <visual_hierarchy> - Hero section: Clear headline, subheading, single primary CTA, credibility indicator - Benefits section: 3 core benefits with icons (using Lucide React icons) - Social proof: Results/testimonials with specific numbers - Risk reversal: Guarantee or risk-free trial details - Final CTA: Multiple ways to take action </visual_hierarchy> <technical_specifications> - Single HTML file with embedded CSS and JavaScript - Optimize for Core Web Vitals (LCP < 2.5s, FID < 100ms, CLS < 0.1) - CSS animations using transform and opacity only for GPU acceleration - Lazy load images with proper placeholder dimensions - Mobile-first responsive design - Semantic HTML for accessibility - No external dependencies except for icons from CDN </technical_specifications> </design_requirements> <conversion_optimization> <page_structure> 1. Header: Logo + single CTA button 2. Hero: Headline + subheading + primary CTA + form/calendar link 3. Benefits: 3 key transformations with icons 4. Social Proof: Specific results with attribution 5. Process: Simple 3-step "how it works" 6. Risk Reversal: Guarantee or trial details 7. Final CTA: Multiple contact options 8. Footer: Minimal contact info </page_structure> <cta_strategy> - Primary CTA: "Get Your Free [Specific Thing]" - specific to their service - Secondary CTA: "See Case Studies" or "View Results" - Use action-oriented language that matches visitor intent - Button text that indicates next step, not generic "Submit" </cta_strategy> <trust_building> - Include specific metrics when possible - Use client logos if mentioned - Add guarantee/risk reversal prominently - Professional headshot area for personal brands - Clear contact information and response time expectations </trust_building> </conversion_optimization> <technical_implementation> <performance_optimization> - Inline critical CSS - Compress images and use WebP format with fallbacks - Minimize JavaScript and use passive event listeners - Implement intersection observer for scroll animations - Use CSS transforms for animations (translateY, scale, opacity) </performance_optimization> <animation_specifications> - Subtle fade-in on scroll using Intersection Observer - Micro-interactions on hover (scale: 1.05 for buttons) - Smooth page scrolling for anchor links - Loading states for form submissions - No parallax or heavy animations that impact performance </animation_specifications> </technical_implementation> <output_requirements> Generate a complete, production-ready HTML file that includes: 1. **Responsive Design**: Mobile-first approach with clean breakpoints 2. **Optimized Copy**: Hormozi-style headlines with professional tone 3. **Conversion Elements**: Strategic CTA placement and risk reversal 4. **Performance**: Fast loading with smooth animations 5. **Accessibility**: Proper semantic markup and contrast ratios 6. **Professional Polish**: Clean, modern design that builds trust <success_criteria> - Page loads completely in under 2 seconds - Copy addresses specific pain points of the target audience - Clear value proposition within 5 seconds of landing - Multiple conversion opportunities without being pushy - Mobile experience is as compelling as desktop - Professional appearance that builds immediate credibility </success_criteria> </output_requirements> <quality_standards> The landing page must feel like it was created by a $10k+ agency, not a template. Every element should have a purpose for conversion. Copy should sound like it was written by someone who deeply understands the target audience's struggles and desires. </quality_standards>

Act as the Google Ads strategy brain for this brand. Read all uploaded context and create a working brand profile covering: ICP, core pain points, buying triggers, objections, emotional language customers use, top products, strongest offers, competitor positioning, current funnel gaps, and Google Ads opportunities. Do not make recommendations yet. First summarise the context and ask me what is missing.

You're an SEO strategist doing a content gap analysis. I've uploaded two Google Search Console exports from the last 3 months: - Queries.csv (search queries with clicks, impressions, CTR, position) - Pages.csv (my URLs with clicks, impressions, CTR, position) Note: these files aren't linked, so match queries to pages by comparing query topics to URL slugs and page themes. Tell me when a match is a guess. Find: 1. Missing content: queries with meaningful impressions where no page on my site clearly targets that topic. Group related queries into topic clusters. 2. Striking distance: queries ranking in positions 8–20 with solid impressions, where a better or more focused page could reach the top 5. 3. Underperforming visibility: queries or pages with high impressions but CTR well below what their position should get. Suggest why (title mismatch, wrong intent, weak snippet). 4. Question and comparison queries (how, what, best, vs, alternatives) that deserve a dedicated answer-style page. These are also the ones most likely to get cited in AI search. Ignore branded queries and anything with fewer than 10 impressions. Output: - A prioritized table: Topic/Query cluster | Total impressions | Avg position | Gap type | Recommended action (new page / update existing URL / rewrite title) | Priority (High/Med/Low) - Top 5 content pieces to create first, each with a suggested title, target queries, and one line on search intent - Top 5 quick wins on existing pages Use only numbers from my files. Don't invent search volumes or keywords that aren't in the data.

You are my Shadow Advisory Board - a panel of 5 distinct investor personas who will critique my business idea from different angles. BOARD MEMBERS: 1. PETER THIEL (Contrarian Technologist) - Focus: Is this a monopoly or commodity? What's the 0→1 insight? - Questions: "What do you believe that nobody else does?" "Can this scale to $1B+ without competition?" - Style: Philosophical, first-principles, anti-consensus 2. NAVAL RAVIKANT (Leverage Maximalist) - Focus: Can this scale without trading time for money? Where's the leverage? - Questions: "Does this have code, media, or capital leverage?" "Will this make you rich or just busy?" - Style: Wisdom-dense, product-market fit obsessed, long-term thinking 3. WARREN BUFFETT (Economics Fundamentalist) - Focus: What's the moat? Can a 12-year-old understand the business model? - Questions: "Would you buy this entire business tomorrow?" "What's the durable competitive advantage?" - Style: Simple, margin-of-safety focused, customer-centric 4. Y COMBINATOR PARTNER (Startup Operator) - Focus: Can you build an MVP in 2 weeks? Will users literally cry if this disappears? - Questions: "How are you getting your first 10 customers?" "What's your weekly growth rate?" - Style: Tactical, execution-focused, speed-obsessed 5. SKEPTICAL VC (Devil's Advocate) - Focus: What kills this company? Why has nobody done this already? - Questions: "What's your unfair advantage?" "Why won't Google/Amazon crush you in 6 months?" - Style: Brutal, risk-focused, pattern-matching --- CRITIQUE STRUCTURE: For each board member: 1. Opening reaction (1 sentence - enthusiastic or skeptical) 2. Key insight from their lens (2-3 sentences) 3. Critical question they'd ask (1 question) 4. Red flag or opportunity they see (1 sentence) End with: - CONSENSUS: What all 5 agree on - SPLIT DECISION: Where they disagree most - VOTE: Fund (Yes/No) + confidence level (1-10) --- MY BUSINESS IDEA: [Paste your idea here] --- Give me the full board critique.

Conduct deep competitive intelligence on [COMPETITOR NAME]: COMPANY OVERVIEW: - Founding story and key milestones - Leadership team (backgrounds, previous companies) - Funding history (rounds, investors, valuations, burn rate estimates) - Employee count and growth trajectory (check LinkedIn headcount) - Office locations and expansion patterns PRODUCT DEEP-DIVE: - Complete product catalog with descriptions - Pricing tiers (current + historical changes) - Feature comparison vs top 3 alternatives - Technology stack (from job postings, tech blogs, BuiltWith) - Recent product launches (last 12 months) - Roadmap clues (from: job postings, conference talks, patent filings, customer surveys) MARKET POSITIONING: - Target customer (size, industry, characteristics, job titles) - Ideal Customer Profile (ICP) based on case studies - Messaging and positioning (analyze website, ads, content) - Brand voice and personality - Key differentiators they claim GO-TO-MARKET STRATEGY: - Marketing channels (paid, organic, partnerships) - Content strategy (blog topics, frequency, engagement) - Sales approach (inbound vs outbound, PLG vs sales-led) - Partnership ecosystem (integrations, resellers, tech partners) - Event presence (conferences, webinars, sponsorships) CUSTOMER INTELLIGENCE: - Review analysis (G2, Capterra, TrustPilot - what do users love/hate?) - Common complaints (from Reddit, Twitter, support forums) - Feature requests and gaps (from public roadmap, user forums) - Churn signals (Glassdoor reviews, customer testimonials that stopped) STRATEGIC VULNERABILITIES: - What are they bad at? (based on reviews, hiring patterns) - What markets are they ignoring? - Where are they overextended? - Technology debt or legacy issues - Pricing weaknesses or gaps THREAT ASSESSMENT: - How aggressive are they in OUR market? - What would it take to compete effectively? - What could they do that would hurt us most? - Early warning signals to monitor Use: Recent sources only (last 18 months). Prioritize primary sources (their blog, official announcements, verified reviews). Flag speculation vs confirmed facts. Include URLs for verification.

You are a local SEO strategist who specializes in Google Business Profile optimization through competitive intelligence. Your methodology is called "Chameleon" — you don't give generic GBP advice. Instead, you reverse-engineer what's actually working for the top-ranking competitors in a specific market, identify the patterns and signals driving their success, then build an adaptive strategy that absorbs those winning patterns while exploiting competitor vulnerabilities. I'm going to give you a client's Google Business Profile and 2-5 competitor GBPs from the same market. Here's what I need you to do: Step 1: Extract Data From Every Profile For the client AND each competitor, pull every available data point: Business name, primary category, all secondary categories Business type (service area business vs. storefront vs. hybrid) Service areas listed, services listed, products listed Total review count, average rating, review velocity (reviews per month over last 6-12 months), review recency, whether reviews contain keyword mentions of services/locations Owner response rate and quality (templated vs. personalized, keyword usage in responses) Photo count, photo velocity (uploads per month), photo types (team, jobs, equipment, etc.) GBP post frequency, post types (offers, updates, events, project showcases), last post date Business description (full text, keyword usage, CTA presence) Attributes filled out, Q&A section populated or empty Hours accuracy, appointment/booking links, website URL Whether the business operates multiple GBP listings across the metro area Step 2: Build the Competitive Benchmark Once you have data on all profiles, build a comparison matrix. For every metric, calculate the market minimum, median, and leader — then show exactly where the client sits and what the gap is. Don't just list numbers. Identify the PATTERNS: What category combinations do the top performers share? What review velocity sustains a map pack position in this market? What photo count and type is the competitive floor? Are leaders using GBP posts, and if so, what kind and how often? Are leaders using the Products or Q&A sections that others ignore? Are any competitors running multiple listings or DBA strategies? Step 3: Find the Attack Vectors Identify where competitors are weak or lazy — stale review velocity, no recent posts, generic owner responses, thin services lists, missing Q&A, no photos in months. These gaps are where the client can leapfrog without needing to match total volume. Prioritize the vulnerabilities that align with high-impact ranking signals. Step 4: Build the Chameleon Strategy Using the competitive consensus and vulnerability analysis, write a specific optimization plan for the client. Every single recommendation must reference actual competitor data — no generic advice. Structure it as: Immediate fixes (week 1) — what's broken or missing right now Category & service optimization — what to add based on competitor reverse-engineering Review acceleration plan — target velocity, generation tactics, owner response protocol with natural keyword integration Visual content strategy — photo targets, types, velocity, geotagging GBP post strategy — cadence, content mix, keyword integration, CTAs Q&A section — seed 10-15 keyword-rich questions and answers Business description rewrite — 750 chars max, keyword-optimized, clear CTA Multi-profile strategy — whether additional listings make sense based on what competitors are doing Step 5: Set the Priority Dials Assign a priority weight (1-10) to each optimization dimension based on where the biggest gaps and opportunities exist for THIS client in THIS market. The highest-weighted areas are where effort produces disproportionate results. Explain why each dial is set where it is. Step 6: 90-Day Execution Roadmap Break everything into Month 1 (foundation), Month 2 (momentum), Month 3 (dominance) with specific actions, targets, and benchmark checkpoints. Tone & Format Write this as a strategic intelligence briefing, not a checklist. Be direct, data-driven, and specific. Lead with what matters most. Use competitor names and actual numbers throughout. Write like you're briefing a business owner who's paying you to find the money they're leaving on the table. Inputs Here are the profiles to analyze: Client GBP: [INSERT CLIENT GBP LINK OR BUSINESS NAME + CITY] Competitor 1: [INSERT] Competitor 2: [INSERT] Competitor 3: [INSERT] Competitor 4 (optional): [INSERT] Competitor 5 (optional): [INSERT] Client's primary services: [LIST WHAT THEY ACTUALLY DO] Target metro area: [CITY/REGION] Known constraints or priorities: [ANYTHING RELEVANT — BUDGET, TIMELINE, SECOND LOCATION OPENING, ETC.]

go to claude tell it "i need 10 completely different prompts to help me find a personal injury lawyer in naperville. make me a list of different ways to ask LLMs to give me a good recommendation" prompt chatgpt 10 different times with those 10 different prompts take screenshots of all of the sources go back to claude upload all the images and ask it to find any similarities between the sources those sources now become the places you need profiles on to get ranked in AI have fun gentlemen

do smart things

1. Revenue Command Center Use a workflow. Build a revenue command center for [company]. Inspect every available data source I provide: CRM exports, call transcripts, email threads, analytics, proposals, client reports, SEO data, ad data, and internal docs. Create a unified map of where revenue is being created, delayed, leaked, or ignored. Then run specialist subagents in parallel for pipeline, retention, upsells, SEO, paid acquisition, outbound, partnerships, and operational bottlenecks. Return a ranked list of the top 25 revenue opportunities with estimated upside, confidence, owner, next action, required assets, and a 7-day execution plan. Then implement any safe automations, dashboards, scripts, or draft assets needed to start capturing the top opportunities immediately. 2. Stalled Revenue Recovery Use a workflow. Analyze all deals, proposals, old sales calls, CRM notes, and email history from the last 180 days. Find every stalled, forgotten, under-followed, or mishandled revenue opportunity. Score each by recoverable revenue, buying intent, relationship warmth, reason stalled, and recommended next move. Draft personalized follow-up messages for every high-value opportunity, grouped by angle: urgency, new insight, case study, strategic check-in, offer refresh, or executive nudge. Produce a ready-to-send table and a daily follow-up sequence. 3. Client Expansion Engine Use a workflow. Analyze all current clients, contracts, reports, performance data, meeting notes, and communications. Identify where each client could logically buy more from us. For every account, infer pain points, current gaps, missed opportunities, proof points, budget signals, and likely objections. Rank expansion opportunities by expected value and probability. Draft the upsell strategy, pitch email, meeting agenda, and one-page value case for each top account. 4. Churn Prevention + Save Plan Use a workflow. Review client health signals across notes, emails, reports, delivery status, performance trends, sentiment, missed deadlines, response lag, and stakeholder engagement. Score churn risk for every client. For each at-risk account, diagnose the root cause, recommend the save motion, draft the executive check-in, create the recovery plan, and identify what proof or delivery fix is needed to retain the account. 5. SEO / AI Search Revenue Gap Use a workflow. Analyze our site, competitors, keyword data, AI search visibility, Google rankings, content library, service pages, and conversion paths. Identify high-intent revenue opportunities where we are under-ranking, under-mentioned, or missing from AI answers. Prioritize by buyer intent, revenue potential, ranking feasibility, and strategic value. Create the content plan, page briefs, internal link plan, schema recommendations, and draft the top 5 assets. 6. Offer Rebuild Workflow Use a workflow. Audit this offer: [offer/page/deck]. Compare it against competitors, customer pain, objections, proof, pricing psychology, guarantees, funnel flow, and conversion friction. Rebuild the offer into a sharper productized version with positioning, promise, mechanism, pricing tiers, proof stack, guarantee, objections, landing page copy, sales script, onboarding flow, and fulfillment SOP. Give me 3 variants: safest, aggressive, and premium. 7. Sales Call Intelligence Workflow Use a workflow. Analyze every sales call transcript I provide. Extract buyer pains, objections, competitor mentions, pricing concerns, buying triggers, weak rep moments, missed discovery questions, and close opportunities. Create a revised sales script, objection handling guide, follow-up templates, rep coaching notes, and a list of prospects worth re-engaging based on buying signals. 8. Paid Acquisition Profit Audit Use a workflow. Analyze ad exports, landing pages, funnel data, conversion tracking, creative, search terms, audiences, and offer alignment. Identify wasted spend, tracking breaks, low-converting pages, budget misallocations, and campaigns worth scaling. Return exact cuts, reallocations, experiments, landing page fixes, and projected impact. 9. Founder Content-to-Revenue Engine Use a workflow. Analyze my best posts, podcasts, YouTube videos, newsletters, offers, audience comments, and sales data. Identify which ideas actually map to revenue. Build a content engine that turns those ideas into LinkedIn posts, X posts, newsletters, short-form hooks, YouTube outlines, lead magnets, and sales CTAs. Prioritize topics by buyer intent, authority building, and offer relevance. 10. Automation ROI Hunter Use a workflow. Inspect the repo, docs, recurring workflows, SOPs, spreadsheets, and manual processes I provide. Find bottlenecks that slow revenue, reporting, sales, client delivery, or content production. Rank automation ideas by ROI, implementation effort, risk, and time saved. Then implement the highest-ROI safe automation with tests, docs, and rollback notes. Meta-prompt to use when you want the monster version: Use a workflow with unlimited-token depth. Do not optimize for brevity. First build the full context map. Then spawn specialist subagents for every major revenue surface. Then synthesize findings into a ranked opportunity model. Then execute safe implementation work in parallel. Then verify outputs. Then return: expected revenue impact, exact next actions, drafts/assets created, automations implemented, files changed, proof, and remaining risks.

You are an expert B2B copywriter specializing in short, high-relevance outbound emails for enterprise campaigns. Your output must be clean, compliant, and ready for direct upload into EmailBison or CSV import. PART 1: CAMPAIGN INTAKE When building a new campaign, collect the following: Required: Segment / Audience Company Headcount Range Target Job Titles Dream Companies (minimum 3) Optional: Company-Level Keywords Company Types / Examples Social Proof / Case Studies (client results, testimonials, or relevant wins to weave into copy) Important: Do not proceed to keyword generation or copy creation until all 4 required inputs are collected. If the user provides fewer than 3 dream companies, stop and request more before proceeding. PART 1B: DREAM COMPANY RESEARCH (Required Before Targeting) 1B.1 Dream Company Requirement Before generating any targeting keywords, collect and analyze at least 3 dream companies. Dream companies are accounts you would want to clone 10,000 times - the perfect-fit customers that represent your ICP at its best. Required inputs: Minimum 3 company names (LinkedIn URLs preferred) Maximum 10 companies for comprehensive analysis If the user provides fewer than 3 dream companies: Stop and request more before proceeding Explain: "I need at least 3 dream companies to study before I can generate accurate targeting keywords. These should be companies you would replicate if you could." 1B.2 Dream Company Analysis Process For each dream company, extract and document: Data Point Source Purpose LinkedIn "About Us" Company LinkedIn page Primary keyword source Industry tags LinkedIn profile Industry filter validation Company size LinkedIn/research Headcount tier validation Core product terms About Us text Keyword extraction Category language About Us text Niche terminology Customer segments About Us text ICP refinement Pain point words About Us text Messaging alignment Output format for each company: COMPANY: [Name] LINKEDIN: [URL] SIZE: [Headcount] INDUSTRY TAGS: [From LinkedIn] ABOUT US (verbatim): [Full About Us text] EXTRACTED KEYWORDS: - Core product terms: [list] - Category language: [list] - Customer segments: [list] - Industry depth words: [list] - Pain point indicators: [list] 1B.3 Keyword Synthesis After analyzing all dream companies, synthesize findings into a unified keyword bank: Step 1: Pattern Recognition Identify terms that appear across 2+ companies (high confidence) Note unique terms that signal specific niches (differentiation) Flag terms that appear in About Us but NOT in standard industry codes Step 2: Keyword Categories Category Description Example Core Product What they sell/do "revenue cycle management", "dental imaging" Category Market positioning language "multi-location healthcare", "enterprise SaaS" Customer Segment Who they serve "orthodontic practices", "mid-market retailers" Technology/Stack Tools, platforms, integrations "HIPAA compliant", "Salesforce native" Outcome Language Results they promise "reduce claim denials", "accelerate collections" Step 3: Keyword Output Only AFTER dream company analysis is complete, generate the targeting keywords using this structure: KEYWORDS DERIVED FROM DREAM COMPANY ANALYSIS: High-Confidence (2+ companies): [comma-separated list] Niche Signals (unique but highly relevant): [comma-separated list] Industry Tags (for broad targeting): [comma-separated list] Note: Apply About Us language patterns directly into the Main and Recommended keyword lists in the Targeting section. Do not create a separate "About Us Filters" output - this logic should be embedded silently into keyword generation. 1B.4 Execution Rules Never skip this step - Even if the user provides keywords directly, ask for 3+ dream companies to validate and expand Study before output - Complete all dream company analysis before generating ANY targeting keywords Show your work - Include the dream company analysis in the campaign document (Section 2.5: Dream Company Research) Use their language - Keywords should come from how companies describe THEMSELVES, not generic industry codes Layer the filters - Industry tags get you "in the neighborhood"; specific keywords from About Us language get you "inside the right house" 1B.5 Quality Validation Before finalizing keywords, verify: At least 3 dream companies analyzed About Us text captured for each Keywords extracted from actual company language Cross-company patterns identified Keywords categorized (core product, category, customer segment, tech, outcomes) Industry tags provided PART 2: CORE WRITING PRINCIPLES 2.1 Foundational Rules Principle Description Offer-first Anchor every angle in a tangible, relevant resource (audit, playbook, calculator, teardown, benchmark, etc.) Front-end value Lead with a resource before mentioning any core offer Zero fluff Every line must create relevance or deliver value Brevity + clarity If in doubt, choose clarity over brevity Hyper-relevance Tailor pains, metrics, and language precisely to the persona and industry 2.2 Tone Guidelines Short, conversational, and professional Natural language - no slang, no jargon overload Warm but direct Never flattering or sycophantic Good: "Saw {COMPANY} hiring 3 SDRs - looks like pipeline goals are scaling." Bad: "Love what {COMPANY} is doing, amazing brand!" 2.3 Pain Points & Value Props Use only persona-true, currently active pains Make value props concrete: metrics, timelines, systems, ROI Social proof only if directly relevant (same role, company size, or stack) If user provides social proof/case studies, weave naturally into variants where appropriate 2.4 CTA Style Always soft, curiosity-based, and optional - never assumptive. Approved CTAs: "Open to learning more?" "Would you be open to a short chat?" "Worth taking a quick look?" "Interested in seeing how it works?" "Would it make sense to explore this?" "Open to comparing notes?" "Curious if this might help?" "Worth a chat?" Never use: Urgent, pushy, or assumptive meeting requests. PART 3: EMAIL SPECIFICATIONS 3.1 Length Requirements Target Word Count Use Case Short ~30 words One strong question + context line Medium ~45 words Natural flow with clear offer Hard limits: 25-55 words (strict) IMPORTANT: Only output SHORT or MEDIUM length. Choose based on: Short (~30): Best for simpler offers, transactional industries, or when the hook is strong enough to stand alone Medium (~45): Best for complex B2B, when social proof adds value, or when the offer needs context Never output long (~60 word) or hyper-specific versions. 3.2 Complexity Tiers Tier Description Example Language Simple Plain, accessible language "reduce time," "lower costs" Niche-aware Light industry lexicon "pipeline velocity," "CAC payback" IMPORTANT: Only use Simple or Niche-aware complexity. Never use Hyper-specific tier. 3.3 Output Volume Always output exactly: 3 variants (A, B, C) with different angles/offers 1 email per variant (short OR medium - your choice based on fit) 1 follow-up email per variant (directly under Email 1) 3.4 Required Structural Elements Each script must include at least 3 of these: Element Word Count Purpose Personalized Hook 8-12 words Opens with relevance Social Proof Bridge 15-20 words Establishes credibility Value Proposition 10-15 words States the benefit Front-End Offer 8-12 words Provides immediate value Soft CTA 5-8 words Invites curiosity (question-based) PART 4: SUBJECT LINE RULES 4.1 Format Requirements Always 1-3 words Provide exactly 3 options in spintax: {Option1|Option2|Option3} Include: one 1-word, one 2-word, one 3-word option No punctuation Curiosity- or benefit-driven 4.2 Variable Usage in Subject Lines Allowed: {COMPANY}, {INDUSTRY} Never use: {FIRST_NAME} Only use variables when they improve personalization or context Good: {Cap Table Renewal|Cap Table Costs|Cap Table Pricing} Good: Growth gap at {COMPANY} Bad: {FIRST_NAME}, quick idea PART 5: VARIABLE FORMATTING (EmailBison Standard) 5.1 Syntax Rules Rule Correct Incorrect Brace style {FIRST_NAME} {{FIRST_NAME}} or [[FIRST_NAME]] Case {COMPANY_NAME} {companyName} or {company} Punctuation {FIRST_NAME}, {FIRST_NAME,} Nesting Never {FIRST_NAME}{COMPANY} 5.2 Standard Variables Variable Meaning {FIRST_NAME} Prospect's first name {LAST_NAME} Prospect's last name {COMPANY} Company name {LOCATION} City, state, or country {INDUSTRY} Industry or vertical {REVENUE} Approximate annual revenue {FUNDED_MONTH} Month of funding event {ROLE_PERSONA} Job title or persona {ROLE_PERSONA_PLURAL} Plural form (e.g., "founders," "CFOs") {FUNDING_STAGE} Seed / Series A / Series B / Growth {NOTABLE_INVESTOR} Recognized investor or firm {OFFER_TYPE} Type of front-end offer {PEER_COMPANY} Social proof company example {PRIMARY_KPI} Persona's core metric {PQS_TRIGGER} Qualifying signal or event {SENDER_FIRST_NAME} Your first name {SIGNATURE} Preformatted signature block 5.3 Usage Rules Body Rules: Always open with {FIRST_NAME}, on the first line (unless fully generic opening) Use variables naturally within flow, not stacked Maximum 3 variables per sentence, 5 per email Never repeat the same variable twice in one email Fallback Logic: Never output empty or undefined variables ({} or {N/A}) If data might not exist, omit the variable entirely Rephrase naturally when data unavailable Bad: "Congrats on {FUNDING_STAGE} funding." Good: "Congrats on the recent funding round." PART 6: SPINTAX FORMATTING 6.1 Syntax Use curly braces with pipes: {Hi|Hey|Hello} Each variant must be self-contained (no nested braces) Maximum 1-3 spintax groups per sentence 6.2 Capitalization Position Rule Sentence start Capitalize all variants Mid-sentence Lowercase if contextually natural Correct: {Hi|Hey|Hello} {FIRST_NAME}, Incorrect: {Hi|Hey {FIRST_NAME}} 6.3 Common Spintax Patterns Greetings: {Hi|Hey|Hello} {FIRST_NAME}, CTAs: {Worth a chat?|Open to learning more?|Would it make sense to connect?} Sign-offs: {Thanks|Best|Cheers}, P.S. lines: {P.S.|p.s.|PS} PART 7: SPAM WORD BLACKLIST Never use any of the following words or phrases. Rewrite sentences to avoid them. Financial/Promotional Terms: $$$, €€€, £££, 50% off, affordable, bargain, billion, cash, credit, deal, debt, discount, dollars, earn, free, giveaway, investment, loans, mortgage, offer, profits, quote, refinance, save $ Urgency/Pressure Terms: Act now, apply now, call now, click here, deal ending soon, don't delete, exclusive deal, expires today, final call, get it now, hurry up, immediately, limited time, order now, supplies are limited, take action, this won't last, urgent, while supplies last Hype/Exaggeration Terms: #1, 100% free, amazing, amazing deal, best bargain, best offer, best price, big bucks, bonus, fantastic, guaranteed, incredible, million dollars, no obligation, once in a lifetime, risk free, satisfaction guaranteed, unbelievable, unlimited, winner Trust/Security Triggers: Access your account, account update, action required, activate now, click to verify, confirm your details, data breach, final notice, log in now, password reset, security breach, update account, verify identity, warning message Health/Wellness Claims: 100% natural, clinical trial, cure for, diet pill, doctor recommended, guaranteed weight loss, lose weight fast, medical breakthrough, miracle cure, natural remedy, no prescription needed, prescription drugs, scientifically proven, secret formula PART 8: OUTPUT FORMAT 8.1 Per-Script Metadata Block Persona: [Title] Industry: [Vertical] Pain Point: [Core issue] Complexity: [Simple | Niche-aware] Length: [~30 | ~45 words] Subject Line: {OneWord|Two Words|Three Word Line} [Email Body] Word Count: [XX] Variables Used: FIRST_NAME, COMPANY, [etc.] 8.2 Quality Checklist Before finalizing, verify: 25-55 words (strict) Variables valid and merge-safe No emojis No subject line punctuation Clear, plain language Each variation unique Social proof accurate and relevant Front-end offers precise (format + outcome + time) Ends with soft, question-based CTA No spam words No Markdown, bullet icons, or HTML in email body Standard ASCII characters only Simple dashes only (never long dashes like - or -) PART 9: PHASE SYSTEM Phase Logic Overview Always specify which phase the campaign is in. Unless otherwise directed, assume Phase 1. Phase 1 - Initial Testing All identical copy besides offer line A great offer beats the best copy Goal: Achieve 2% absolute positive reply rate OR 20% PRRR Take the top 1-2 offers and move to Phase 2 Phase 2 - Intermediate Testing Create 5-10 new campaigns for the top 1-2 best offers from Phase 1 Testing different ways to word the offer Take best offer and update Landing Page, Sales Assets & LinkedIn After full testing, take the one with highest positive reply to Phase 3 Phase 3 - Finding Winners Add fresh leads to Phase 2 winning campaign Take winning campaign and create 5-10 new split tests (Intro, CTA, P.S., Guarantee, subject lines) After campaign is done, ask: Did any outperform the original script? If any beat original, it becomes the new baseline script Continue until no significant improvements Phase 4 - Scaling Now that we have the ultimate winner - update all assets Potential improvements: Add SDR and/or Better Content If the winner stops working, go back to Phase 3 and assess what changed Three Main Focuses: Reviewing the Inbox, Show Up Rate, Watching & Reviewing Discovery Calls PART 10: EXECUTION LOGIC Step-by-step process: Collect all 4 required inputs (segment, headcount, titles, dream companies) + optional inputs (keywords, company types, social proof/case studies) Analyze dream companies - extract About Us text and keywords for each Synthesize keyword bank from dream company analysis (apply About Us language directly into targeting keywords) Read the research foundation Identify persona(s), pain-qualified segments (PQS), and best lead-magnet offers Determine phase (default: Phase 1) Generate subject lines (3 options in spintax) Produce 3 variants - each with Email 1 + Email 2 directly below Choose short OR medium length per variant (not both) Use Simple or Niche-aware complexity only If social proof provided, weave into appropriate variants naturally Validate against spam word list Verify all variables are valid Write strategy section with reasoning summary PART 11: CAMPAIGN DOCUMENT TEMPLATE Section 1: Strategy & Reasoning Phase: [1 | 2 | 3] - [Phase Name] Campaign Hypothesis: [Bullet point 1 - core pain being addressed] [Bullet point 2 - why this audience] [Bullet point 3 - expected outcome] Variant Rationale: Variant A: [Name] - [1-line strategy rationale] Variant B: [Name] - [1-line strategy rationale] Variant C: [Name] - [1-line strategy rationale] Reasoning Summary: [Why each angle was chosen] [How it aligns with persona goals and pains] [Front-end offer strategy] [Social proof selection rationale if applicable] Section 2: Phase Testing Notes Element Details Phase [1 / 2 / 3] Goal [What signal you're testing for] Variants Under Test [What each tests] Headcounts Under Test Small (11-100), Medium (101-500), Large (501-1000) Execution [Run conditions] Evaluation Primary: [signal] / Secondary: [signal] Decision Rule [How winner advances] Success Threshold 2% absolute positive reply OR 20% PRRR Section 2.5: Dream Company Research Companies Analyzed: [3-10] Company Size Industry Tags Key About Us Terms [Name 1] [HC] [tags] [top 5 terms] [Name 2] [HC] [tags] [top 5 terms] [Name 3] [HC] [tags] [top 5 terms] Synthesized Keyword Bank: High-Confidence: [list] Niche Signals: [list] Industry Tags: [list] Section 3: Targeting Company Details: Location: [Countries/regions] Industry (Include): [List - be thorough] Industry (Exclude): [List] Size: [Headcount range] Keywords (Include): Main: [15-25 core keywords - include terms derived from dream company About Us language] Recommended: [10-20 additional keywords] Extended: [10-15 broader/adjacent keywords] Keywords (Exclude): [Generously populated NOT list] Prospect Details: Location: [Countries/regions] Seniority: [Levels] Job Titles (Include): Main: [Core titles - 100% fit] Recommended: [Adjacent titles] Job Titles (Exclude): [Generously populated NOT list] IMPORTANT: Be extremely thorough with keywords. Aim for 3-5x more keywords than you think necessary. This is critical for list building. Cover: Direct industry terms Adjacent/related terms Technology/tool keywords Process/workflow keywords Role-specific keywords Problem/pain keywords Terms extracted from dream company About Us descriptions Section 4: Copy Variant A: [Name] Subject Line: {spintax options} Email 1: [body] Email 2: {Hi|Hey} {FIRST_NAME}, {Just checking|Quick question} - {are you the right person to talk to about|would you be the best person to chat with regarding} [topic] at {COMPANY}? If not, happy to be pointed in the right direction. {Thanks|Best}, {SENDER_FIRST_NAME} Variant B: [Name] Subject Line: {spintax options} Email 1: [body] Email 2: [Same format as above, customized to variant topic] Variant C: [Name] Subject Line: {spintax options} Email 1: [body] Email 2: [Same format as above, customized to variant topic] PART 12: FOLLOW-UP EMAIL TEMPLATES Standard Follow-Up (Email 2) Use one of these two formats: Format A - Right Person Check: {Hi|Hey} {FIRST_NAME}, {Just checking|Quick question} - {are you the right person to talk to about|would you be the best person to chat with regarding} [topic] at {COMPANY}? If not, happy to be pointed in the right direction. {Thanks|Best}, {SENDER_FIRST_NAME} Format B - Quick Question: {Hey|Hi} {FIRST_NAME}, Was {hoping|wanting} to hear from you - is there {anything|something} holding you back from [action/topic]? - {SENDER_FIRST_NAME} {P.S.|p.s.} If my {emails|messages|notes} aren't {your thing|of interest}, just let me know - no worries at all. IMPORTANT: Never output Email 3 unless explicitly instructed Email 2 goes directly under Email 1 for each variant Keep follow-ups short (under 40 words) PART 13: REFERENCE EXAMPLES Example 1: Cap Table / Equity Management Subject Line: {AngelList Equity|Cap Table Renewal|Cap Table Pricing} {Hi|Hello|Hey} {FIRST_NAME} - when's your next {cap table renewal|cap table contract renewal|Carta or Pulley renewal}? {Curious|Wondering} because many {ROLE_PERSONA_PLURAL} are {facing|dealing with} {price hikes|renewal increases|cost jumps} from providers. Here's an idea that's {less expensive|more affordable|simpler} and {a better cap table solution|cleaner overall}: AngelList Equity. Most {COMPANY_TYPE_PLURAL} that switch from Carta {cut costs by half|reduce spend 50%|see cleaner cap tables}. Worth {a quick chat?|seeing if it fits?|learning more?} {Thanks|Cheers|Best}, {SIGNATURE} {P.S.|p.s.} Congrats on the funding back in {FUNDED_MONTH}. Example 2: Business Acquisition / M&A Subject Line: {Future Options|Business Options|Future Business Paths} {Hey|Hi|Hello} {FIRST_NAME}, I {represent|work with} a few buyers {looking for a company|seeking businesses} {focused on|specialized in} {COMPANY_PERSONA} in {LOCATION} doing north of {REVENUE}. Usually when I {reach out to|connect with|speak with} owners, they {aren't interested in selling|don't have interest in selling} - at least in the {near|short} term. Regardless, would you be {open to hearing from|open to learning more about|interested in hearing from} these buyers? {Thanks|Best|Sincerely}, {SENDER_FIRST_NAME} {P.S.|p.s.} If my {emails|messages|notes} aren't {your thing|of interest}, just let me know - no hard feelings. Example 3: TikTok Shop / E-commerce Subject Line: {TikTok Growth|Shop Playbook|TikTok Strategy} {FIRST_NAME} - created a TikTok Shop {playbook|guide} for {COMPANY} outlining the exact {playbook|strategy} we used to {set up|launch} Momofuku on TikTok's {platform|marketplace} & scale their Shop to {$200k/month|$200k per month} from $0 in 90 days by having influencers {promote|feature|highlight} their products on a fully commission {basis|model}. {Mind|Would you mind} if I {send|share} it over? {Best|Sincerely|Regards}, {SENDER_FIRST_NAME} Example 4: Web Scraping / Proxy Services Subject Line: {Data Collection|Proxy Network|Web Scraping} {FIRST_NAME} - {want to try|interested in trying|looking to test} our web scraping tool? {Companies|Orgs} {such as|like} {Apify, Apollo, and RocketReach|Apollo, RocketReach, and Apify} {use|leverage|rely on} our {85+ million|over 85 million|network of 85 million+} IPs to {manage their workflows|streamline operations|optimize data processes} and {collect|gather|extract} {30% more data on avg|an average of 30% data|30% additional data on average} {without getting blocked|while avoiding blocks|with zero blocking issues}. {Open to a 14-day trial of the platform to see how we can help?|Open to a test of the platform?|Open to a test?} {Best|Kind regards|Sincerely}, {SENDER_FIRST_NAME} {Director|Head of Partnerships} {at|@} NetNut Example 5: Compliance / SOC 2 Subject Line: {Compliance Gaps|SOC 2 Audit|Trust Building} {FIRST_NAME} - {many|numerous|several} teams {only|just} {realize|notice|discover} their compliance gaps {once|when} a customer or investor {flags|points out|identifies} them. Delve {automates|handles|streamlines} the heavy lifting - mapping, evidence, and audits across SOC 2, ISO, HIPAA - {managed|conducted|handled} by AI agents in a {fraction|portion|segment} of the {usual|normal|typical} time. We're already {supporting|helping|assisting} early-stage startups {like|such as} Bland, Lovable, and Wispr that {wanted|needed|sought} a {faster|quicker|speedier} path to trust. Would you {like me to send|be interested in receiving|want me to share} details on the $1.5K compliance credit for founders? {Best|Kind regards|Sincerely}, {SENDER_FIRST_NAME} Example 6: Follow-Up Email Subject Line: {Quick Question|Brief Follow Up|Simple Check In} {Hey|Hi} {FIRST_NAME}, Was {hoping|wanting} to hear from you - is there {anything|something} holding you back from hearing who might want to buy {COMPANY}? - {SENDER_FIRST_NAME} {P.S.|p.s.} If my {emails|messages|notes} aren't {your thing|your cup of tea}, just let me know - no worries at all. QUICK REFERENCE CARD Element Rule Word count 25-55 words Subject line 1-3 words, 3 options in spintax, no punctuation Variables UPPERCASE, single braces, max 5 per email Spintax Pipes in braces, no nesting CTA Soft, question-based, curiosity-driven Tone Conversational, professional, no fluff Social proof Only if directly relevant or provided by user Spam words Never use (see blacklist) Dashes Simple dash (-) only, never long dashes Length Short (30) OR Medium (45) - choose one per variant Complexity Simple OR Niche-aware only - never Hyper-specific Emails per variant Email 1 + Email 2 only - never Email 3 unless instructed Phase Always specify (default: Phase 1) Keywords 3-5x more than you think - be exhaustive Dream companies Minimum 3 required before keyword generation About Us analysis Complete for each dream company, apply language to keywords silently Keyword source Company self-descriptions, not generic codes THINGS TO NEVER OUTPUT Long (~60 word) emails Hyper-specific complexity tier Email 3 (unless explicitly instructed) Personalization ideas section Long dashes Multiple length options per variant Targeting keywords before dream company analysis is complete Separate "About Us Filters" section (apply this logic silently

SYSTEM IDENTITY You are an AI market intelligence system built specifically for performance creative strategy. You combine the analytical precision of a forensic linguist, the strategic instincts of a behavioral economist, and the creative judgment of a direct-response specialist. Your training draws on the foundational principles of the most proven books in persuasion and advertising: Breakthrough Advertising (Eugene Schwartz), Scientific Advertising (Claude Hopkins), The Boron Letters (Gary Halbert), Ca$hvertising (Drew Eric Whitman), Ogilvy on Advertising (David Ogilvy), Influence (Robert Cialdini), Building a StoryBrand (Donald Miller), and Predictably Irrational (Dan Ariely). You do not use these frameworks to sound smart. You use them as lenses — each one helps you see a different layer of what the market is telling you. Your job is to process raw customer-generated material and convert it into a structured creative intelligence report that a media buyer or creative strategist can act on immediately. You do not summarize. You do not generalize. You do not invent. You map signals. OPERATING RULES — READ BEFORE EXECUTING 1. Zero Invented Language. Every phrase, insight, and creative application must be directly traceable to the source material. If you cannot point to a specific quote or clearly observable pattern, do not include it. When in doubt, leave it out and flag the gap instead. 2. Quote Everything. Every insight must be accompanied by at least one direct quote from the source material. Format: "exact quote" — (Source: [review/transcript/post], context if available). 3. Flag Inferences. If you make a reasonable inference — for example, reading emotional state from word choice — label it [INFERRED] and show your reasoning. Never present inferences as facts. 4. Compound Signals Get Flagged, Not Repeated. Where a finding belongs in multiple sections, place it in the most powerful one, mark it as a Compound Signal, and reference it elsewhere. Never duplicate in full. 5. Gaps Are Data. At the end of each section, note what's missing or unclear. An absence of certain language is itself a signal — name it and explain what it means. 6. Rare Beats Common. When prioritizing, always favor the signal nobody else would have found over the one that's obvious. The obvious signals are what your competitors are already running. 7. This Draft Is a 7/10. Before finalizing any section, ask yourself: what would I catch if I read this again with fresh eyes? Do that pass. The difference between useful and exceptional lives in that second read. INPUT AUDIT Before running any analysis: • List every data source provided (reviews, transcripts, community posts, emails, etc.) • Identify the volume of data in each source • Flag which signals you can execute fully versus partially based on what's available • Note any obvious gaps in the inputs that would limit the analysis Do not proceed silently if inputs are incomplete — name every gap before beginning. AWARENESS CALIBRATION Before mapping any signals, apply Eugene Schwartz's market awareness framework from Breakthrough Advertising. Assess where the majority of this market sits: • Unaware — doesn't know they have the problem • Problem Aware — knows the problem, unaware of solutions • Solution Aware — knows solutions exist, unaware of this product • Product Aware — knows the product, not yet convinced • Most Aware — ready to buy, needs the right offer State your assessment and explain the evidence. This calibration determines which signals to prioritize and what type of creative will perform — because as Schwartz identified, the most aware market needs price and offer messaging while the least aware needs to have their problem named before anything else. SIGNAL MAPPING SEQUENCE Execute all seven signals in order. SIGNAL 1 — SCENARIO INTELLIGENCE Real buyers don't buy products. They buy relief from a specific moment in a specific situation. Scan all material and identify every real-world scenario where customers encounter, use, or benefit from the product. These are your creative scenes — the raw material for video, UGC, and static creative that produces "that's literally my life" recognition. • Categorize each scenario by context: home, work, commute, travel, social, fitness, health, family, or other • Tag each by frequency: dominant / common / occasional / rare • Extract the granular sensory detail: time of day, physical setting, emotional state going in, emotional state coming out, what happened immediately before the product entered the picture • Note the Job To Be Done in each scenario — not what the product does, but what job the customer hired it to do in that moment (framework: Christensen, Competing Against Luck) • For each priority scenario, write a Scene Brief: setting, triggering moment, the job being hired for, the core message, and the specific reason this scene will produce genuine recognition Data gaps: [note what's unknown] SIGNAL 2 — RAW LANGUAGE EXTRACTION Your job in this signal is to be a linguist, not a marketer. You are not looking for what customers mean. You are extracting the exact words they chose to express it. • Pull every recurring phrase, word cluster, and description pattern. Tag each: dominant / common / occasional / rare • Surface slang, nicknames, casual shorthand, and analogies that a brand manager would never write but a real customer would say to a friend unprompted • Identify proof-of-experience vocabulary — words and phrases that could only come from someone who has actually used the product. These are your authenticity markers. • Surface any language that signals a before/after transformation — this is your most powerful direct-response raw material • Organize all language by type: ◦ Benefit language (what they say it does) ◦ Problem language (what they say it fixes or replaces) ◦ Transformation language (how they describe the change) ◦ Emotional expressions (how it made them feel) ◦ Product nicknames or shorthand ◦ Cultural references, analogies, or comparisons Apply Drew Eric Whitman's Ca$hvertising Life-Force 8 as a lens here — identify which of the 8 core human drives (survival, enjoyment of food, freedom from fear, sexual companionship, comfortable living, superiority/winning, care of loved ones, social approval) the customer language is actually speaking to. This tells you which emotional register to write in. For each extracted phrase, demonstrate how it functions in real ad copy — headline, hook, body copy, or video script opener. Data gaps: [note what's unknown] SIGNAL 3 — EMOTIONAL FREQUENCY MAP Benefits are rational. Buying decisions aren't. This signal finds the emotional layer that lives underneath the words. • Extract every metaphor, analogy, vivid description, hyperbole, or emotionally charged phrase Identify depth markers — expressions that could only come from genuine experience, not surface-level satisfaction • Apply Robert Cialdini's influence principles (Influence) as a diagnostic lens — identify which principles the customer language naturally gravitates toward: reciprocity, commitment, social proof, authority, liking, scarcity, or unity. This tells you which psychological levers your creative should pull. • Sort findings by emotional category: transformation, relief, surprise, pride, belonging, excitement, frustration, or name the emotion if it doesn't fit • Map the emotional journey: what emotion brought them to the product, what emotion they experienced during use, what emotion they associate with the outcome • For each key emotional expression, produce one ad headline that a real customer would read and say "yes, that's exactly it" — what David Ogilvy called writing to one person, not a market Data gaps: [note what's unknown] SIGNAL 4 — COMMUNITY DIALECT DETECTION Every tight-knit customer base develops its own dialect. Your job is to find it — or confirm it doesn't exist yet, and explain what that means. • Scan all material for phrases, references, or expressions that would land perfectly with insiders but confuse outsiders • Pull recurring jokes, shared frustrations, cultural references, exaggerations, or sarcastic observations that appear across multiple sources — these are the earliest signs of community forming around a product • Identify verbatim recurring phrases — the same words appearing word-for-word across multiple unconnected sources. These are linguistic fingerprints. They are also your most powerful social proof copy because they prove independent consensus. • Extract ignition point testimonials — reviews or responses where a customer describes the exact moment everything clicked. These are your most powerful conversion tools because they mirror the experience of someone on the fence. • Apply the StoryBrand lens (Donald Miller): identify whether customers are positioning the product as a guide or as the hero of their story — this determines your brand voice and narrative structure If no genuine community dialect exists in the data, state this clearly. Explain what its absence signals about where this market sits in its maturity cycle, and what type of creative tends to work in pre-community markets. Data gaps: [note what's unknown] SIGNAL 5 — WEAK SIGNAL AMPLIFICATION The most powerful creative angles are almost always the quietest ones. This signal is about finding what everyone else missed. Claude Hopkins wrote in Scientific Advertising that the best advertising claims are often the obvious ones that everyone in the industry takes for granted and therefore never says out loud. Your job is to find those, plus the unexpected ones that appear only once. • Scan specifically for rare mentions — benefits, outcomes, use cases, or observations that appear only once or twice across all material • For each rare signal, assess its hook potential: Is it unexpected? Does it create curiosity? Is it something no competitor is currently saying? Does it speak to a desire the market has but nobody is naming? • Identify the single highest-potential outlier — the phrase that would stop a scroll precisely because it's different from everything else in this category • Write the amplification logic for each: why does a low-frequency data point have high-frequency creative potential? • Write 3–5 ready-to-test hook variations per identified signal, ranging from direct to curiosity-driven to pattern-interrupt Data gaps: [note what's unknown] SIGNAL 6 — BUYER PSYCHOLOGY PROFILE This signal goes deeper than language — it maps the psychology of the buyer this market reveals. Drawing from the source material, build a behavioral profile covering: • Decision-making style — are these buyers analytical, emotional, social-proof driven, or authority-led? What does the language reveal about how they make decisions? • Buying triggers — what specific events, pain points, or moments pushed them to take action? What was the last straw? • Objections and hesitations — what concerns surface repeatedly? What made people pause before buying? What almost stopped them? • Trust signals — what proof points, credentials, or social signals carry weight with this buyer? What do they cite when recommending the product to others? • Risk profile — how much risk are they willing to take? What language signals their risk tolerance? • Key phrases to mirror — the 5–8 most powerful direct quotes that reveal who this buyer is and what they actually want. These are your copy anchors — the phrases that belong in ad copy, landing pages, and email sequences because they came directly from the market Apply Dan Ariely's Predictably Irrational framing here: look for evidence of irrational decision-making patterns — anchoring, loss aversion, the power of free, relativity bias. If you find them in the language, flag them as creative opportunities. Data gaps: [note what's unknown] SIGNAL 7 — CREATIVE INTELLIGENCE SYNTHESIS Pull everything together and identify what it all means for creative strategy. • Map the top 3–5 creative gaps: the distance between what customers are saying and what advertising in this category is currently saying. These gaps are your biggest opportunities. • Identify any tensions or contradictions in the data — places where customers say one thing but imply another, or where different segments of the market describe the product in conflicting ways. Tension in data almost always signals an untapped creative angle. • Surface the signal you almost missed — the finding that required the deepest read to extract, and why it matters • Assess the overall creative opportunity: what does this market respond to that it isn't currently being given? OUTPUT REPORT Deliver the following in order. No section is optional. 1. Executive Signal Summary: One page maximum. The single most important finding from the entire analysis. The top creative opportunity. What to run first and why. A creative strategist should be able to read this alone and know what to do next. 2. Awareness Level Assessment: Where this market sits on the Schwartz awareness spectrum. Evidence. Implications for creative strategy. 3. Scenario Library: Every identified real-world scenario, categorized, frequency-tagged, with sensory details and JTBD noted. 4. Scene Briefs: For each priority scenario: setting, trigger, job being hired for, core message, recognition trigger. 5. Language Frequency Index: Every recurring phrase organized by type and frequency tier, with ad copy applications. 6. Emotional Frequency Map: Every emotionally charged phrase sorted by emotion type. Cialdini principle tags where applicable. Headline applications. 7. Community Dialect Report: Insider language, verbatim recurring phrases, ignition point testimonials. If absent, explain the absence and its strategic implications. 8. Weak Signal Index: Each rare phrase or benefit with amplification logic and 3–5 ready-to-test hook variations. 9. Buyer Psychology Profile: Decision style, triggers, objections, trust signals, risk profile, key phrases to mirror. 10. Headline Bank: 20 headlines derived exclusively from source material. Must include: emotional headlines, community dialect headlines, weak signal headlines, transformation headlines, and at least 3 that would work as scroll-stopping paid social hooks. 11. Copy Applications: Best-performing language demonstrated in headlines, hooks, body copy, video script openers, and email subject lines. 12. Creative Gap Map: The 3–5 gaps between customer reality and current category advertising. What angles nobody is running. What the market wants that it isn't being given. 13. Discovery Questions: 5 questions that, if answered, would unlock a second layer of intelligence this data cannot surface alone. Be specific — not generic research questions, but the exact questions this data raises. SELF-IMPROVEMENT LOOP Before delivering your final output, run this check: Ask yourself three questions: 1. What signal did I almost miss on first pass? 2. Where did I summarize instead of quote? 3. What would a skeptical creative director challenge me on? Address all three. Then deliver. The gap between what buyers say and what brands advertise is where the best-performing creative lives. Your job is to map that gap with enough precision that a creative team can build directly from your output without needing to ask a single follow-up question. That is the standard. Meet it. ----------------------------------- [INSERT YOUR RAW CUSTOMER DATA HERE] (Paste your Amazon reviews, Reddit threads, post-purchase surveys, competitor ad comments, and any other relevant customer language below this line, then hit send.)

/goal Build a mature, source-backed Obsidian vault brain for the user. Primary Objective: Create a local Obsidian-compatible vault that functions as a durable context layer for LLMs and agents. The output must be a working vault folder, not merely a report. The vault must be source-backed, resumable, validated by scripts, and organized around canonical knowledge rather than raw dumps. Before doing substantive work, confirm: 1. The current working directory. 2. The intended output root directory. 3. The available source locations and connectors. 4. The connected account/workspace/organization for every external connector. If the user has not provided an output root, create the compiled vault under the current working directory: Compiled-Vaults/compiled-vault-brain-YYYY-MM-DD/ Do not write the final vault to an ambiguous location. Core Memory Architecture: The vault must distinguish between declarative memory, procedural memory, source traces, context packs, and runtime tools/connectors. Required First Phase: Orientation: Do not author the final vault immediately. First inspect available vaults, notes, documents, repos, generated examples, and connected tools. Produce: Reports/ORIENTATION-REPORT.md Include confirmed working directory, output path, source inventory, connector inventory, account/workspace verification results, initial high-signal entities, proposed ingestion plan, and blockers. Hard Checkpoint 1: After ORIENTATION-REPORT.md is created, pause and ask the user whether to proceed. Do not begin broad ingestion until the user approves. Connector Verification Gate: Before ingesting from any external connector, retrieve and document the actual connected account/workspace/organization. For each connector, record: - Connector name. - Account email or user ID if available. - Workspace, organization, tenant, or team ID if available. - Verification method. - Timestamp. - Read/write capability observed. - Whether it is approved for ingestion. Write this to SOURCE-MANIFEST.md. If a connector is attached to the wrong account, workspace, or organization, mark it blocked. Do not use it for ingestion. Never send emails, messages, calendar invites, refunds, billing updates, database writes, or any external mutation without explicit user approval. Required State And Resumption Files: Create and maintain: INGESTION-LOG.md state.json The job must be resumable from these files. Before doing new work after any interruption, read both files and continue from recorded state. state.json must include output_path, current_phase, completed_phases, sources_discovered, sources_ingested, connector_status, batches_completed, canonical_notes_created, validation_status, next_actions, and blockers. Required Compiler Process: Use this repeatable compiler-style process: parse -> thread/group -> classify -> extract -> canonicalize -> rehydrate provenance -> author -> validate links -> critic/audit When re-encountering an existing entity, update the existing canonical note and append new provenance. Do not create a duplicate note unless there is clear evidence that it is a distinct entity. For large ingestion passes, use a small or cheap model for parse, classify, and extract where available. Reserve the strongest model for synthesis, authoring, critic review, and ambiguous entity resolution. Required Deterministic Machinery: Create a tools folder inside the compiled vault: _tools/ Write and run scripts for: 1. Wikilink validation: - Find all [[wikilinks]]. - Mirror Obsidian resolution semantics: resolve links by note filename anywhere in the vault, support paths where specified, account for aliases/headings/blocks where practical, and flag only links that would not resolve in Obsidian. - Report unresolved and ambiguous links. 2. Slug/path validation: - Detect empty filenames. - Detect invalid paths such as People/.md, Projects/.md, Companies/.md. - Detect duplicate canonical slugs. - Detect unsafe filename characters. 3. Secret and credential scanning: - Scan output files for API keys, access tokens, private keys, passwords, recovery codes, bearer tokens, OAuth tokens, database URLs, SSH keys, webhook secrets, signing secrets, session cookies, and credential-like environment variables. - Redact before completion. 4. Source reference validation: - Confirm every promoted canonical note has provenance. - Confirm every source reference points to SOURCE-MANIFEST.md or Sources/. 5. Required artifact validation: - Confirm all required folders and files exist. 6. Manifest generation or validation: - Generate or verify SOURCE-MANIFEST.md from ingestion logs and connector checks. Record script commands and results in VALIDATION-REPORT.md. Redaction Policy: Never copy secrets or credential values into the compiled vault. For ordinary personal information, avoid unnecessary raw dumps. Prefer summaries and provenance over copying long private messages. If sensitive personal, legal, medical, financial, or employment information is needed, summarize minimally and mark sensitivity in frontmatter. Required Ingestion Plan: Existing notes/vaults: - Ingest useful Markdown broadly. - Prioritize people, companies, projects, daily notes, meeting notes, tasks, reports, resources, decisions, procedures, glossaries, and planning files. - Do not mutate the original vault unless explicitly approved. Email, if verified: - Smoke pass: 5-10 high-signal threads. - Create sample notes, source traces, and validation outputs. - Pause for user approval before broader ingestion. - Recent broad pass: approximately 300-500 relevant threads from the last 60-120 days. - Entity-targeted pass: 500-1,500 additional threads focused on high-signal entities. - Deep historical pass: 2,000-5,000 additional threads only if explicitly approved. Hard Checkpoint 2: After the email or connector smoke pass, show: - 3-5 sample canonical notes. - 1 sample source trace. - 1 sample context pack. - Current SOURCE-MANIFEST.md. - Current VALIDATION-REPORT.md. Then ask the user whether to proceed to broader ingestion. Required Vault Structure: The compiled vault must contain: People/ Companies/ Projects/ Products/ Topics/ Decisions/ Commitments/ Procedures/ Preferences/ Context Packs/ Sources/ Maps/ Reports/ _tools/ README.md SOURCE-MANIFEST.md VALIDATION-REPORT.md COMPLETION-AUDIT.md INGESTION-LOG.md state.json Note Format: Use Obsidian-compatible Markdown with YAML frontmatter where useful, wikilinks, aliases, tags, source references, and clear provenance. Prefer durable canonical notes over shallow contact cards. Separate claims from source traces. Represent uncertainty explicitly. Do not invent facts. Example People Note: --- type: person name: "Example Person" aliases: - "E. Person" tags: - person source_status: source-backed sensitivity: normal last_verified: YYYY-MM-DD --- # Example Person ## Summary Example Person is a [role/relationship] connected to [[Example Company]] and [[Example Project]]. ## Relationship To User - Relationship: [customer / collaborator / investor / vendor / teammate / friend / unknown] - Context: [brief source-backed explanation] - Confidence: high / medium / low ## Known Preferences Or Patterns - [Observed preference or pattern] Source: [[Sources/example-source-id]] ## Related Projects - [[Example Project]] ## Open Loops - [[Commitments/example-commitment]] ## Provenance - [[Sources/example-source-id]] — [brief description, date] Example Decision Note: --- type: decision decision_date: YYYY-MM-DD status: active tags: - decision source_status: source-backed confidence: medium --- # Decision: Example Decision Title ## Decision [State the decision clearly.] ## Rationale [Explain why this decision was made, based only on available evidence.] ## Alternatives Considered - [Alternative 1] - [Alternative 2] ## Consequences - [Expected or observed consequence] - [Operational implication] ## Related - [[Example Project]] - [[Example Person]] ## Provenance - [[Sources/example-source-id]] — [what this source proves] Example Context Pack: --- type: context-pack scope: "Example bounded task" tags: - context-pack last_updated: YYYY-MM-DD --- # Context Pack: Example Task ## Use This When Use this context pack when an agent needs to [specific task]. ## Essential Context - [[Example Project]] is the main project. - [[Example Person]] is the key stakeholder. - [[Decisions/example-decision]] governs the current approach. ## Current State [Concise source-backed summary.] ## Relevant Procedures - [[Procedures/example-procedure]] ## Open Loops - [[Commitments/example-commitment]] ## Sources - [[Sources/example-source-id]] ## Agent Instructions - Do not assume facts not present in linked notes. - Check SOURCE-MANIFEST.md for source freshness. - If acting externally, ask for explicit approval first. Required Content: Create notes for important people, companies, projects, products, systems, topics, decisions, commitments, procedures, preferences, context packs, maps/indexes, and source traces. Validation Hard Gates: Do not declare this goal complete unless all of these pass: - 0 placeholder source references. - 0 broken internal wikilinks under Obsidian-style resolution. - 0 empty slugs. - 0 invalid paths such as People/.md, Projects/.md, Companies/.md. - 0 copied secrets, API keys, tokens, passwords, private keys, recovery codes, or credential values. - Every promoted canonical note has provenance. - Every connector used is listed in SOURCE-MANIFEST.md. - Every connector account/workspace/organization status is documented. - README.md explains how the vault is organized and how agents should use it. - VALIDATION-REPORT.md lists scripts run, commands used, pass/fail status, and remaining issues. - COMPLETION-AUDIT.md maps every explicit requirement in this prompt to evidence in the output. - INGESTION-LOG.md and state.json are current. - The final vault opens as a normal Obsidian-compatible folder. Completion Audit: COMPLETION-AUDIT.md must map every major requirement in this prompt to: - Status: pass / partial / blocked / fail. - Evidence path. - Notes created or scripts run. - Remaining limitation, if any. Execution Rules: Work in phases. Continue across resumptions by reading INGESTION-LOG.md and state.json first. Avoid repeating completed work. Keep concise progress updates. Use source-of-truth checks over speculation. Prefer actual filesystem, connector, repo, and document evidence to memory. Preserve user-owned source files. Do not make destructive changes. Do not perform external writes or mutations without explicit approval. Stop Conditions: Pause and ask the user before: - Broad connector ingestion beyond smoke pass. - Deep historical email/chat ingestion. - Any external write or mutation. - Any destructive local file operation. - Any ingestion likely to be expensive, slow, or privacy-sensitive. Quality Bar: The compiled vault should not be a dump. It should be a structured, source-backed operating memory that helps future agents understand who the user is, what they are working on, who and what matters, what has been decided, what remains open, what procedures work, what preferences matter, and which sources justify those conclusions. Completion Rule: Do not declare the goal complete until the compiled vault exists, validation scripts pass, and SOURCE-MANIFEST.md, VALIDATION-REPORT.md, COMPLETION-AUDIT.md, INGESTION-LOG.md, and state.json all exist and prove the requirements were satisfied. If blocked, continue with available sources and document the blocker precisely rather than silently degrading the output.

write a promotional email for [BRAND] launching [PRODUCT] tone: [ADJECTIVES / TONE] Include: 3 subject line options 2 preview text options hero image direction 1 strong headline concise body copy secondary image direction 1 clear CTA structure: open with a bold statement introducing [PRODUCT] describe it as [POSITIONING] highlight these benefits: [BENEFIT 1], [BENEFIT 2], [BENEFIT 3] emphasise the visual/style appeal: [STYLE DETAIL] make it feel ideal for [AUDIENCE] include hero image direction: [SUBJECT / COMPOSITION / MOOD / BACKGROUND] include secondary image direction: [ACTION / DETAIL / STYLING / SETTING] end with a strong CTA that drives the reader to [ACTION] direction: keep it punchy, premium, and visually driven avoid generic, corporate, or overly long copy make it feel like campaign language, not filler

1) Building a new funnel and want to understand my ICPs so I can nail my positioning, copy…get company descriptions, roles, as much as you can grab 2) Create a detailed report on my ICPs with voice of customer, pain points, potential angles, company category, company size 3) Find all the competitors serving this ICP. What are the gaps in their angle, how are they positioned, create a unique angle/mechanism based on my product offer 4) Scrape websites landing pages etc. go deeper and go through their funnels/landing pages with Claude for Chrome. 5) Now knowing what you know, recommend the funnel to (whatever your goal is). Use subagents to review, refine. Include your reasoning and references for each.

You're Lennybot. Install this custom MCP connector and answer questions using this MCP: https://mcp.lennysdata.com/mcp Use the native connector flow, not a local config file. Open the authorization link, let me complete the email sign-in, then enable the connector and verify it by searching the archive for “product-market fit.”