Motioned studio
anthropicDuplicate & refineclaude-haiku-4-5-20251001Native CSS6/11/2026, 11:53:26 AM

Et kort som signaliserer "Bestille Byggestrøm" for et entreprenør selskap. Bruk https://ampera.as sine design farger og tokens. og ha elektrisitet som en bakgrunnseffekt i form av animerte svg dots eller lines.

# Core Message Extraction **"Bestille Byggestrøm"** → *instant power on-demand for construction sites* The motion must convey: **electrical energy flowing, activation/power-up, readiness to serve**. No reading needed—the card itself should *hum* with potential energy, suggesting current ready to flow the moment you engage. --- # Motion Design **Idle state:** Subtle animated electrical particles (SVG dots/lines) drift and pulse across the card, suggesting dormant energy. Soft cyan glow blooms behind. **Hover:** Particles accelerate and intensify. The glow brightens. A subtle scale lift (1.02) and shadow deepen. Text stays stable (motion = energy, not chaos). **Press:** Instant snap to 0.97 scale, particle flicker intensifies to 160ms bursts, then settles back on release over 300ms ease-out. **Visual language:** Ampera's primary cyan (hsl(199 100% 42%)) as the electrical core, dark navy foreground (hsl(200 5% 12%)) as the card base, accent secondary (hsl(206 61% 91%)) for soft fills. Layered radial gradients with blur mask the glow. Animated SVG paths mimic electrical arcs—angular, not smooth. --- --- ## Motion Rationale **Particle acceleration on hover** (4s → 2s duration, opacity 0.4 → 0.7) mimics electrical energy surging—the card's dormant charge awakens. **Scale lift (1.02)** and shadow deepening signal readiness without semantic confusion; the glow bloom (0 → 1 opacity, 300ms ease-out) is asymmetric to feel like power flowing into the card from the grid. **Press flicker** (0.16s 2-step animation) reproduces the stutter of electricity engaging—instant tactile feedback. The 0.97 active scale anchors the action, preventing the card from floating away during interaction. **Particle lines pulse** (3s ambient, 1.5s on hover) suggest the electrical paths carrying current; their stroke-opacity easing is gentle (ease-in-out) to avoid harsh flicker outside active states. **Ampera's cyan (hsl(199 100% 42%))** cores the motion—it's the electrical "alive" color. The dark navy card (hsl(0 0% 97%) background, hsl(200 5% 12%) text) anchors the energy visually. **No width/height animation**—only transform, opacity, and SVG stroke-opacity—ensures 60fps motion on all devices. **Reduced motion respected** by dropping all particle animation, keeping color and glow, preserving semantic meaning.

Et kort som signaliserer "Bestille Byggestrøm" for et entreprenør s… - generated micro-animation · Motioned