Mega Prompt For Html Css Method : -
Mega Prompt — Self-Contained HTML/CSS Scene Builder
Copy everything below into a new chat, then attach your instruction PDF and PNG assets in the same message.
I want you to build a single self-contained HTML file that plays a timed animation exactly matching the attached PDF spec, using the attached PNG assets. This will be tested by opening the file directly on an Android phone (no server, no external files) — so build it right the first time using the requirements below. These come from hard lessons learned in a previous session; follow them exactly, don't improvise around them.
What to build
A single .html file, self-contained, that autoplays the full scene the moment it's opened, plus one Restart button.
Composition size, duration, and every beat/timing/position described in the attached PDF must be followed precisely — extract exact seconds for every entrance, exit, and camera beat and implement all of them, not just the major ones.
Read every PNG's actual pixel dimensions before laying anything out (don't guess aspect ratios).
Hard technical requirements (do not deviate)
1. Embed all assets as base64 data URIs directly in the HTML. Do not reference external file paths (src="./image.png" or file:///...). On Android, opening HTML through a file manager / "Open with Chrome" often hands the browser a content:// URI with no usable relative-path context, so external references silently fail to load. Read each PNG, base64-encode it, and inline it as data:image/png;base64,.... The resulting file will be large (tens of MB) — that's expected and fine for a local file.
2. Every CSS @keyframes animation must have an explicit 0% stop. If the first defined keyframe stop isn't at 0%, browsers fill the gap using the element's base/default style (not "invisible until it starts"), which makes everything appear in the wrong place at time zero. For every animated element, the 0% keyframe must explicitly set it to its correct pre-entrance state (typically the same position as its first real keyframe, with opacity: 0).
3. Drive continuous/global animations (camera, world transform) with JS, not CSS animation-play-state toggling. A CSS-class-toggle approach (el.style.animationPlayState = 'running') is unreliable for elements whose animation shorthand is defined in a <style> block rather than inline — element.style.animation only reflects the inline style attribute, so play/pause/restart logic that reads and rewrites it silently no-ops for stylesheet-defined animations. Avoid this entire bug class: implement the camera/world transform as a plain requestAnimationFrame loop that computes interpolated position/scale directly from elapsed time and sets element.style.transform every frame. Individual asset pop-in/out animations can stay as CSS @keyframes since those are simpler and tied to a single element's own inline style.
4. No play/pause button. Autoplay on load, plus one Restart button only. Play/pause state machines are a common source of bugs (see #3) and aren't needed for this use case. Start the animation automatically via requestAnimationFrame as soon as the page loads. Restart should reset the JS-driven camera state to t=0 and, for the CSS-driven asset animations, force-restart them via the standard el.style.animation = 'none' → force reflow (void el.offsetWidth) → restore trick (store the original inline animation string first, since setting to '' loses it permanently).
5. Get the CSS 3D z-depth sign right. If using perspective + transform-style: preserve-3d for pseudo-3D depth/occlusion: translateZ(positive) moves an element TOWARD the viewer (renders in front); translateZ(negative) moves it AWAY (renders behind, and appears smaller due to perspective shrink). When the spec says one element should visually hide behind another, give the hidden one a MORE NEGATIVE z than the element in front — don't just rely on DOM/paint order once real 3D transforms are involved, since preserve-3d depth-sorts by z regardless of DOM order.
6. Compute camera framing from real bounding boxes, not eyeballed numbers. For any "camera moves back / recenters to fit X with balanced padding" beat: figure out the actual world-space bounding box of everything that needs to be visible at that moment (from the positions/sizes you already laid out), then derive the exact scale/pan needed to fit that bounding box into the 1920×1080 frame with your chosen padding, centered. Use transform-origin: center center on the world container so scale() doesn't require a compensating translate for content that's already centered. Formula, with transform-origin at canvas center (CX,CY): tx = (CX - bboxCenterX) * scale, ty = (CY - bboxCenterY) * scale. Guessed/arbitrary translateZ dolly values are unreliable and hard to verify — don't use them.
7. Oversize any full-canvas background generously, especially if it sits inside a scaled/panned world container. If the background is a child of the same transformed world as everything else, and the camera ever zooms out, an under-sized background will reveal empty canvas at the edges. Make it comfortably larger than the canvas (at minimum 3x in each dimension, more if the camera zooms out a lot) and centered.
8. Clip the canvas. The outer stage container must have overflow: hidden at exactly the composition's pixel size (e.g. 1920×1080), so nothing ever renders outside the intended frame regardless of what any inner transform does.
9. Auto-fit the canvas to the phone screen. Wrap the fixed-pixel composition in a viewport container and scale the whole stage down (or up) via JS on load and on resize: scale = min(innerWidth/compW, innerHeight/compH). Use transform-origin: center for this outer scaling too.
10. Trim-path draw-on effects (e.g. a stroke animating from undrawn to fully drawn): use SVG <rect>/<circle> with stroke-dasharray set to the shape's full perimeter and animate stroke-dashoffset from that same value down to 0. Give this animation its own explicit 0% stop too (rule #2 applies to SVG attribute animations as well).
11. Orbiting elements (things that revolve around a center point while the whole group also rotates): use a rotating SVG <g> wrapping the orbiting children, positioned via SVG coordinates — this gives true orbital motion for free, cleaner and more reliable than manually keyframing each child's x/y position frame by frame.
12. Respect any "no bounce/overshoot" instruction literally — use plain ease-in/ease-out (or the specific easing curve given in the PDF, often shown as a graph — approximate it as a cubic-bezier or smoothstep, don't use spring/elastic/back easing anywhere unless explicitly asked.
Before you deliver
Validate the generated HTML: check that every <div>/<button> tag is balanced, check the inline <script> block parses as valid JS (e.g. by extracting it and running it through a syntax checker), and spot-check a few generated @keyframes blocks to confirm the explicit 0% stop is present and correct.
Tell me plainly which parts of the implementation involved judgment calls or approximations (camera padding amounts, timing interpretations of ambiguous spec wording, etc.) so I know what to check first when I test it.
Give me the finished .html file as a download, not inline code.
My workflow after you deliver
I'll open the file on my phone and report back exactly what's wrong, ideally with the approximate timestamp. Fix precisely what I describe rather than re-guessing broadly across the whole file.
Pdf I Wrote For Motion Graphics
Prompt used In Google Omni Editing
Use the uploaded facecam video as the base. Preserve the person, camera, lighting, framing, background, desk, and chair exactly as they are. The camera must remain completely locked with no zoom, pan, shake, or reframing. Do not modify the person's appearance, lip sync, or body. Only add cinematic 3D VFX on top of the existing video.
Timeline according to the Hinglish dialogue:
When the speaker says:
"Sharks lagbhag 40 crore saalon se dharti ke oceans mein tair rahi hain..."
A small realistic lake appears on the center of the desk. Two green trees grow on opposite sides of the lake. As soon as the word "Sharks" is spoken, a realistic shark falls from the top of the frame into the lake with a satisfying splash. The shark remains partially above the water with subtle swimming motion and gentle ripples.
When the speaker says:
"Aur sabse interesting baat ye hai..."
Keep the lake, trees, and shark visible with subtle idle animation.
When the speaker says:
"...pehle trees aane se bhi kareeb 5 crore saal pehle..."
The two trees smoothly dissolve away with a clean wipe/particle effect while the lake and shark remain exactly where they are.
When the speaker says:
"...sharks is planet par maujood thi."
Only the lake and shark remain visible until the end of the clip, with subtle water movement and the shark gently floating.
Requirements:
- Do not move or regenerate the person.
- Do not move the camera.
- Keep the facecam perfectly consistent.
- Keep the desk, chair, and background unchanged.
- Anchor every VFX element to the tabletop with realistic shadows, reflections, and perspective.
- Add no extra objects besides the lake, two trees, and shark.
- Make the VFX look like high-end Pixar/Disney-quality CGI seamlessly composited into a real YouTube facecam.
Post a Comment