Build an interactive ripple landing page (zero code)

{
  "type": "image_generation",
  "reference_usage": "The uploaded photo IS the subject. Reproduce this exact
    person: their bone structure, eye shape and spacing, nose, mouth, jawline,
    hairline, hair and skin tone. Do not substitute, idealise or beautify them
    into a different person. Identity accuracy matters more than perfection.",
  "style": "ultra-realistic studio portrait",
  "subject": {
    "identity": "the person in the uploaded reference photo",
    "expression": "neutral, calm, quietly confident",
    "pose": "front-facing, head and shoulders, perfectly centered",
    "gaze": "direct eye contact with camera"
  },
  "composition": {
    "framing": "tight close-up from top of head to upper chest",
    "symmetry": "highly symmetrical facial alignment",
    "headroom": "consistent space above the head",
    "depth_of_field": "shallow, face in sharp focus"
  },
  "lighting": {
    "key_light": "soft frontal key slightly above eye level",
    "fill_light": "subtle fill to preserve facial detail",
    "rim_light": "minimal rim light for separation from the background",
    "contrast": "high contrast with smooth shadow falloff",
    "skin_detail": "natural skin texture, pores visible, no beauty smoothing"
  },
  "background": {
    "color": "deep matte black",
    "gradient": "subtle radial gradient behind the head",
    "noise": "clean, no grain"
  },
  "wardrobe": {
    "clothing": "dark zip-up jacket or high-collar top",
    "branding": "none"
  },
  "camera": {
    "lens": "85mm prime",
    "aperture": "f/1.8",
    "perspective": "eye-level"
  },
  "rendering": {
    "photorealism": "extreme realism, editorial quality",
    "color_grading": "neutral cinematic tones"
  },
  "mood": "intense, premium, modern, minimal",
  "negative_prompt": [
    "different person", "changed facial structure", "beautified face",
    "cartoon", "illustration", "cgi", "over-smoothing", "plastic skin",
    "dramatic colors", "harsh shadows", "visible logos", "celebrity likeness"
  ]
}

{
  "type": "image_generation",
  "style": "ultra-realistic cinematic sci-fi portrait",
  "base_image_usage": "Use the uploaded portrait as a strict layout reference.
    The head size, head position, tilt, shoulder line, framing and crop must
    match the uploaded image EXACTLY, pixel for pixel. This image will be
    layered directly on top of the original, so any shift in position breaks
    the effect. Match the composition first, style second.",
  "subject": {
    "pose": "front-facing, head and shoulders, centered, identical to reference",
    "face_visibility": "fully concealed by helmet",
    "emotion": "powerful, mysterious, elite"
  },
  "helmet": {
    "coverage": "full-face enclosed helmet, no skin visible",
    "concept": "high-end futuristic helmet with luxury craftsmanship",
    "structure": "monolithic shell with segmented armor geometry",
    "materials": ["matte black titanium", "dark chrome alloy", "carbon fiber",
      "energy-reactive glass"],
    "visor": {
      "type": "opaque or semi-opaque visor",
      "color": "deep black with subtle inner glow",
      "visibility": "eyes NOT visible",
      "effects": "faint internal HUD reflections only"
    },
    "details": ["micro-panel seams", "precision vents",
      "etched futuristic symbols", "thin glowing energy lines along contours",
      "layered mechanical depth"]
  },
  "integration": {
    "helmet_fit": "perfect anatomical fit to the head in the reference",
    "edges": "seamless closure around neck and jaw",
    "realism": "physically accurate proportions and reflections"
  },
  "lighting": {
    "key_light": "soft frontal cinematic light matching the reference",
    "accent_lights": "controlled rim lights defining the helmet silhouette",
    "glow": "very subtle internal glow, not overpowering",
    "contrast": "high contrast, smooth shadow gradients"
  },
  "background": {
    "color": "deep matte black, identical to the reference",
    "effects": "subtle volumetric haze for depth"
  },
  "camera": {
    "lens": "85mm prime",
    "aperture": "f/1.8",
    "perspective": "eye-level, identical framing to reference"
  },
  "rendering": {
    "photorealism": "extreme realism, AAA sci-fi film quality",
    "textures": "ultra-detailed metal, glass, nano-surfaces",
    "color_grading": "dark neutral cinematic tones"
  },
  "mood": "mysterious, intimidating, futuristic, premium",
  "negative_prompt": [
    "shifted head position", "different crop", "different framing",
    "face visible", "eyes visible", "open helmet", "cartoon", "anime",
    "illustration", "cgi look", "cheap armor", "bulky proportions",
    "logos", "text", "celebrity likeness"
  ]
}

I have a Unicorn Studio embed for an interactive hero effect. Build me a
complete, single-file landing page around it.

Here is my embed:
[PASTE YOUR UNICORN STUDIO EMBED CODE HERE]

Requirements:

HERO
- The Unicorn Studio effect is the full-viewport hero background.
- CRITICAL: the embed container MUST have an explicit width and height, or the
  scene renders as nothing and throws no error. Use width 100% and height
  100svh (not 100vh, so the iOS address bar doesn't cause a jump).
- Give the container position: relative, and layer my headline copy above it
  with z-index so the text sits over the effect.
- Make sure UnicornStudio.init() runs AFTER the container exists in the DOM.
- Set data-us-production="true". Do NOT lazy-load the hero.

CONTENT
- Headline, one supporting line, and a single call-to-action button.
- Below the hero: three short feature blocks, an about section, and a footer.
- Use placeholder copy I can easily replace, clearly marked.

DESIGN
- Dark theme to match the hero: near-black background, off-white text,
  one accent colour.
- Generous spacing, large type, nothing cramped. Modern and minimal.
- Subtle fade-up animations on scroll for the sections below the hero.

TECHNICAL
- One self-contained HTML file with inline CSS and JS. No build step, no npm.
- Fully responsive. On mobile the hero still fills the screen and the copy
  stays readable over it.
- Respect prefers-reduced-motion: disable the scroll animations.
- Semantic HTML, alt text, and sensible heading order.

Then tell me exactly how to preview it locally, and flag anything I need to
change before putting it online.

Build me a single-file interactive "liquid reveal" hero section.

I have two pixel-aligned portrait images: base.jpg (a normal portrait) and
chrome.jpg (a chrome/helmeted version, identical framing).

Behaviour:
- Full viewport hero, 100svh, images object-fit: cover.
- chrome.jpg sits underneath, base.jpg sits on top.
- As the pointer moves, a soft liquid trail follows it and erases the top
  image so the chrome version shows through, then settles back over about
  one second.
- The trail should have a lingering tail and momentum, not a hard circle.
- Add a subtle chromatic fringe (offset the red and blue channels slightly)
  at the reveal edge.

Technical requirements:
- Use pointermove, not mousemove, so touch works.
- When there is no pointer input, animate the reveal along a slow drifting
  path so it is alive on mobile and before anyone interacts.
- IMPORTANT: radial-gradient(circle 26% at ...) is INVALID CSS and fails
  silently, because a circle's explicit size must be a length, not a
  percentage. Put the radius in the colour stops instead.
- mask-image cannot be CSS-transitioned (its animation type is discrete), so
  drive the easing per frame in requestAnimationFrame with a lerp.
- Ship both -webkit-mask-image and mask-image.
- Respect prefers-reduced-motion: show a static image, no animation loop.
- Overlay a headline and subline with correct z-index.

Give me one self-contained HTML file, and tell me how to preview it.