peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c289097ca0d197a5be8ed6bb7870453c2aae8c09
happy-life-star/docs/superpowers/plans/2026-05-24-mini-program-script-home-cosmic-background.md
T

2.1 KiB
Raw Blame History

Mini Program Script Home Cosmic Background Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Center the script generation headline and add subtle cosmic background motion without interfering with the page content.

Architecture: Add a decorative background layer inside ScriptView.vue and keep all interactive content above it. Use CSS-only planets, star speckles, and meteors so no assets or runtime logic are needed.

Tech Stack: Vue 3 single-file component, uni-app mini-program build, scoped CSS animations.

Task 1: Add Background Layer

Files:

  • Modify: mini-program/src/pages/main/ScriptView.vue

  • Add a non-interactive cosmic-background view as the first child of .script-view.

  • Add child views for two planets, two star fields, and three meteors.

  • Ensure the decorative layer has no event handlers.

Task 2: Fix Layering and Headline Alignment

Files:

  • Modify: mini-program/src/pages/main/ScriptView.vue

  • Set .script-view to position: relative and overflow: hidden.

  • Set .wish-home, .generation-view, and .result-view to position: relative; z-index: 1.

  • Center .hero-copy with justify-content: center and text-align: center.

  • Increase the spacing under .hero-copy so the inspiration section breathes.

Task 3: Add Cosmic Styling

Files:

  • Modify: mini-program/src/pages/main/ScriptView.vue

  • Style .cosmic-background with absolute positioning, low opacity, and pointer-events: none.

  • Style planet elements with radial gradients and slow drift animations.

  • Style meteor elements with diagonal motion and staggered animation delays.

  • Style star fields with low-contrast radial gradients.

Task 4: Validate

Commands:

  • cd mini-program && npm run build:mp-weixin

  • git diff --check

  • Mini-program build passes.

  • Diff check reports no new whitespace errors.

Reference in New Issue View Git Blame Copy Permalink