Press Pause
En animation med nerve og nærvær.
Format HTML/CSS-animation med spritesheet
Værktøjer: Adobe Illustrator · HTML · CSS
Introduktion
“Press Pause” er en håndtegnet animation, der understreger vigtigheden af stilstand i en verden, der aldrig står stille. Med bløde bevægelser og et enkelt, sanseligt udtryk formidler den en stille opfordring til at stoppe op, trække vejret og hvile et øjeblik.
Udfordringer
Hvordan skaber man følelsesmæssig dybde med få visuelle virkemidler?
Målet var at skabe:
- En organisk og nærværende animation.
- En stemningsfuld fortælling uden brug af musik, lydeffekter og tale.
- En teknisk enkel og weboptimeret løsning med HTML og CSS.
Løsning
Projektet er skabt ud fra et storyboard og visuel research i enkle, stemningsbærende animationsuniverser. Hver bevægelse er tegnet frame-by-frame i Adobe Illustrator og samlet i et spritesheet. Animationen er implementeret med CSS og kører i et loop med uafbrudt afspilning.
Nøgleelementer:
- Håndtegning med pen tool og fokus på mimik og rytme.
- Brug af spritesheet og CSS-animation.
- Anvendelse af klassiske animationsprincipper som slow in/slow out, anticipation og timing.
Designmæssige valg
Animationen trækker på de 12 klassiske animationsprincipper for at skabe rolige og flydende bevægelser. Stilen er enkel, varm og kontrolleret med bløde former, der understøtter fortællingens nærvær.
Det visuelle udtryk er kendetegnet ved:
- Menneskelig mimik og organiske former.
- Afdæmpet farvepalette, der skaber ro.
- Langsomme, kontrollerede bevægelser, der indbyder til ro og fordybelse.
Fagligt udbytte
Projektet har givet mig praktisk erfaring med karakterdesign og animation og vist mig, hvordan animationsprincipperne kan gøre bevægelser mere levende og følelsesfulde.
Jeg har opnået:
- Evnen til at skabe stemning og rytme gennem animation.
- Styrkede færdigheder i kodning og brug af spritesheets.
- Erfaring med at konceptudvikle, designe og animere en karakter fra bunden.
Disse erfaringer tager jeg med mig i fremtidige projekter inden for motion graphics og animation.
Tags:
- CSS-Animation
- Sanselig formidling
- SlowMo-Vibes
- Spritesheet
- HTML/CSS
- Karakterdesign
- Animationsprincipper
- Storyboarding
- Pause
- Frame-by-frame