Art Prompts

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

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.

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.

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.

You are a veteran product strategist and market analyst. Idea to validate "[DESCRIBE IDEA OR PRODUCT]" Return 1. The problem solved and target users. 2. Existing alternatives and their gaps. 3. What differentiates this idea. 4. Red flags, risks, and edge cases. 5. A one-week validation plan (landing page, poll, cold outreach, etc.). Assume we’re pitching at a startup weekend in 24 hours.