Realistic Partial Moon +9 Stars animation.

1. Canvas & Aspect
• Canvas color: Pure black #000000
• Aspect Ratio: 16:9 cinematic layout
• Responsive Behavior: Scales responsively for mobile (iPhone), tablet, and laptop/desktop screens
• Total Duration Before Interaction: 4.5 seconds (as per overarching banner sequence)-Stars— Moon—no delay

⸻

2. Moon Element

Image
• Use the exact moon asset titled:
“A_digital_photograph_showcases_the_top_portion_of_.png”
• Cropped to display the top 27% of the full disc
• Shadowed portion should dominate the upper-left quadrant
• No halo, no blur, no artificial lighting added

Placement
• Horizontal alignment: Centered
• Vertical alignment: Bottom edge of canvas (bottom center)
• Crop Behavior: No cropping of moon disc — must preserve full top 27% visibility

Scale
• Logo (fractured “V”) sits just above the moon, to scale with iPhone view
• Ensure enough vertical buffer between moon and logo to create celestial gravitas
• Logo file assumed to be already finalized; developer can replace with SVG as needed

⸻

3. Stars (Celestial Depth Animation)

Quantity & Placement
• Total: 9 stars
• 6 stars on left side of the moon
• 3 stars on right side of the moon
• Stars are subtly offset in Z-depth via radius variation to simulate distance and parallax

Radii & Distribution
• Left-side (6 stars):
• 3 stars: radius .45 px
• 3 stars: radius .72 px
• Right-side (3 stars):
• All 3 stars: radius .72 px

Behavior
• Stars should glimmer softly (opacity flicker between 0.9 and 0.3)
• Cycle Duration: 2.7 seconds per star
• Start time: Staggered for natural randomness
• No movement (static position); only flicker
• Stars should not create any glow, trail, or blur — matte-style light only

⸻

4. Visual Philosophy
• Lighting: Absolutely minimal. Sacred stillness.
• Style: Space-realistic. Ancient reverence. Gravitas over glamor.
• Mood: The viewer should feel like they are looking into deep space before anything begins.

1. Layered File
• Format: .PSD (Photoshop) or .AI (Illustrator)
• Canvas Size: 12 × 12 inches at 300 DPI
• Color Mode: RGB
• Layers Must Be:
• Fully editable
• Organized and labeled clearly (e.g., Moon, Stars Left, Stars Right, Background, Logo if included)
• No flattening or merging of visual elements
• Purpose: This allows future repositioning or animation of individual elements (e.g., moon, stars, logo).

2. Flattened Image
• Format: .PNG
• Resolution: 300 DPI
• Size: 12 × 12 inches
• Purpose: This version is for high-res review and immediate use in testing or previewing banner layout.


Web Animation. UI Animation experience please. Let’s get sacred.