Motion-lab

Kontrollert luksus i bevegelse

Denne siden tester rolig, presis motion for premium mørk stil: subtile reveals, levende dybde og taktil respons.

Du kan velge blant 34 effekter her. Hver effekt viser anslått treghet.

Bruk denne profilen Til forsiden Test annet tema

AI Control Preview

Stabil live-synk

Live prioritering av forbedringer aktiv

Statusindikator med rolig puls aktiv

Modulvis fokus-skift i kontrollpanel aktiv

GSAP showcase: 3 premium demoer

Ja, GSAP er perfekt her. Under ser du tre konkrete animasjonsmoenstre vi kan bruke i produksjon.

Demo 1

Cinematic Stagger Reveal

Headline, underpunkter og chips bygges opp med kontrollert timeline.

Treghet: Lav (engangs GSAP-timeline ved visning).

Premium flow for high-end checkout

Rask kasse Trygg betaling Smart frakt

Demo 2

Magnetic CTA Drift

Knappen reagerer subtilt paa peker og foeles mer fysisk og premium.

Treghet: Lav (pointer-reactive transform, ingen layout-shift).

Demo 3

Data Path Draw

Path-draw og node-pop fungerer bra i AI- eller prosess-seksjoner.

Treghet: Lav-middels (path-drawing + node-pop sekvens).

Prioriterte motion-elementer

Under ser du de viktigste bevegelsene vi faktisk bør bruke i produksjon, med fokus på ro, dybde og presisjon.

Hero reveal

Myk fade + liten rise i sekvens på overline, tittel, intro og CTA.

Treghet: Lav (GPU-vennlig opacity + transform).

Header-rytme

Header komprimeres diskret ved scroll og får mer dybde i shadow.

Treghet: Lav (scroll-oppdatering med liten visuell endring).

Kort med tyngde

Hover løfter kort minimalt, med kontrollert shadow og subtle border-shift.

Treghet: Svaert lav (kun ved hover).

Premium CTA

Knapper har rolig gradient, subtil sheen og tydelig aktiv state.

Treghet: Lav (enkle transitions, ingen tunge layout-endringer).

11 ekstra motion-effekter

Alle demoene holder lav amplitude, rolig tempo og premium respons.

1. Sheen Surface Drift

Myk lysstripe over en overflate, lav frekvens og liten kontrast.

Treghet: Lav (rolig bakgrunnsanimasjon).

2. Orbit Beacon

En diskret indikator i rolig bane for “levende system”-følelse.

Treghet: Lav-middels (kontinuerlig orbit).

3. Signal Stream

Subtile signal-linjer som flyter gjennom en modul med dybde.

Treghet: Lav-middels (flere samtidige linjer).

4. Tactile Tilt Card

Mikro-tilt på hover for taktil respons, med veldig liten vinkel.

Treghet: Svaert lav (kun hover, ingen idle-kostnad).

Hover me

5. Count-up Metrics

Rolig tall-opptrapping for KPI-seksjoner, uten flashy overdrivelser.

Treghet: Lav (engangs ved scroll inn i viewport).

0% Kvalitets-score

0ms Median interaksjon

0% Konverteringsløft

6. Aurora Mesh Drift

Subtil mesh-gradient som beveger seg nesten umerkelig.

Treghet: Middels (flere gradientlag i bevegelse).

7. Precision Scanline

En stille scanline for premium teknologifolelse uten stoy.

Treghet: Lav (en enkel, smal line-animasjon).

8. Depth Stack Hover

Lagdelte flater som loefter seg rolig ved hover.

Treghet: Svaert lav (kun hover-transforms).

9. Focus Ring Glide

Fokus-ring som glir inn mykt og bygger tillit i skjemaer.

Treghet: Lav (boer trigges ved fokus i produksjon).

epost@butikken.no

10. Quiet Progress Rail

Progress-rail med rolig fremdrift for lasting og status.

Treghet: Lav-middels (kontinuerlig progress-loop).

11. Beacon Wave

Diskret beacon med myke ringer for systemstatus.

Treghet: Lav-middels (puls-ringer gaar kontinuerlig).

6 ekstra lette effekter

Disse er valgt for lynrask produksjon: premium foelelse med minimal ytelseskostnad.

12. Micro Hover Lift

Knapp eller kort loeftes 1-2px paa hover for taktil premium-foelelse.

Treghet: Svaert lav (kun transform ved hover).

13. Soft Underline Link

Lenker faar en rolig underline-inntegning ved hover.

Treghet: Svaert lav (en enkel pseudo-linje).

14. Thumbnail Zoom Hover

Produktbilde zoomes svakt ved hover for premium produktfoelelse.

Treghet: Lav (transform paa ett bilde).

15. Border Tint Hover

Border skifter rolig mot aksentfarge paa interaktive flater.

Treghet: Svaert lav (kun border-color transition).

16. Press Feedback CTA

Knapper komprimeres svakt i aktiv state (0.98) for presis respons.

Treghet: Svaert lav (transform i active state).

17. Icon Nudge

Liten pil glir 3px ved hover, fin for CTA-lenker.

Treghet: Svaert lav (mini transform paa ikon).

10 overskrift-effekter

Forsiktig typografisk motion for hero, seksjonsoverskrifter og premium CTA-flater.

1. Fade Rise

Eksklusiv ro i flyt

Treghet: Svaert lav (engangs intro).

2. Gradient Shift

Moderne dybde i tekst

Treghet: Lav-middels (kontinuerlig gradient).

3. Underline Draw

Kontrollert markering

Treghet: Svaert lav (tynn linje).

4. Soft Glow

Subtil premium-glod

Treghet: Lav-middels (text-shadow koster litt).

5. Tracking Settle

Presisjon i typografi

Treghet: Lav (letter-spacing animasjon).

6. Mask Reveal

Elegant intro i linje

Treghet: Lav (clip-path i liten flate).

7. Accent Bar

Retning med aksentlinje

Treghet: Svaert lav.

8. Sheen Sweep

Lys med lav amplitude

Treghet: Lav (myk overlay-passering).

9. Shadow Drift

Myk skyggerytme

Treghet: Lav-middels (shadow-animasjon).

10. Pulse Dot

Diskret fokuspunkt

Treghet: Svaert lav.

Ytelseskart for alle 34 effekter

Hver effekt under har anslaatt treghet, slik at dere enkelt kan velge en lekker og lett produksjonspakke.

Prioriterte motion-elementer

Hero reveal Treghet: Lav (GPU-vennlig opacity + transform).
Header-rytme Treghet: Lav (scroll-oppdatering med liten visuell endring).
Kort med tyngde Treghet: Svaert lav (kun ved hover).
Premium CTA Treghet: Lav (enkle transitions, ingen tunge layout-endringer).

11 ekstra motion-effekter

1. Sheen Surface Drift Treghet: Lav (rolig bakgrunnsanimasjon).
2. Orbit Beacon Treghet: Lav-middels (kontinuerlig orbit).
3. Signal Stream Treghet: Lav-middels (flere samtidige linjer).
4. Tactile Tilt Card Treghet: Svaert lav (kun hover, ingen idle-kostnad).
5. Count-up Metrics Treghet: Lav (engangs ved scroll inn i viewport).
6. Aurora Mesh Drift Treghet: Middels (flere gradientlag i bevegelse).
7. Precision Scanline Treghet: Lav (en enkel, smal line-animasjon).
8. Depth Stack Hover Treghet: Svaert lav (kun hover-transforms).
9. Focus Ring Glide Treghet: Lav (boer trigges ved fokus i produksjon).
10. Quiet Progress Rail Treghet: Lav-middels (kontinuerlig progress-loop).
11. Beacon Wave Treghet: Lav-middels (puls-ringer gaar kontinuerlig).

3 GSAP-demoer

1. Cinematic Stagger Reveal Treghet: Lav (engangs GSAP-timeline ved visning).
2. Magnetic CTA Drift Treghet: Lav (pointer-reactive transform, ingen layout-shift).
3. Data Path Draw Treghet: Lav-middels (path-drawing + node-pop sekvens).

6 ekstra lette effekter

Micro Hover Lift Treghet: Svaert lav (kun transform ved hover).
Soft Underline Link Treghet: Svaert lav (en enkel pseudo-linje).
Thumbnail Zoom Hover Treghet: Lav (transform paa ett bilde).
Border Tint Hover Treghet: Svaert lav (kun border-color transition).
Press Feedback CTA Treghet: Svaert lav (transform i active state).
Icon Nudge Treghet: Svaert lav (mini transform paa ikon).

10 overskrift-effekter

1. Fade Rise Treghet: Svaert lav (engangs intro).
2. Gradient Shift Treghet: Lav-middels (kontinuerlig gradient).
3. Underline Draw Treghet: Svaert lav (tynn linje).
4. Soft Glow Treghet: Lav-middels (text-shadow koster litt).
5. Tracking Settle Treghet: Lav (letter-spacing animasjon).
6. Mask Reveal Treghet: Lav (clip-path i liten flate).
7. Accent Bar Treghet: Svaert lav.
8. Sheen Sweep Treghet: Lav (myk overlay-passering).
9. Shadow Drift Treghet: Lav-middels (shadow-animasjon).
10. Pulse Dot Treghet: Svaert lav.

Til forsiden