Christoffer Bremert zenblazer
0 Followers · 0 Following
  • Joined on 2026-05-21
Repositories
1
 Projects Packages Public Activity Starred Repositories

@zen/skia-motion (0.1.0)

Published 2026-08-22 12:29:51 +02:00 by zenblazer

Installation

@zen:registry=https://git.zencloudgalaxy.com/api/packages/zenblazer/npm/
npm install @zen/skia-motion@0.1.0
"@zen/skia-motion": "0.1.0"

About this package

Skia-baserade rörelse- och effektkomponenter för Expo, per kategori (biljett #69, karta #57).

@zen/skia-motion

Skia-baserade rörelse- och effektkomponenter för Expo. Se docs/adr/0001-paketyta.md i huvudrepot (zenblazer/skia-motion-lab) för hur den här katalogens src/ byggs (node tools/paketera.js, körs innan npm publish) — redigera aldrig src/ här direkt, den är genererad och gitignoread.

Installera

npx expo install @shopify/react-native-skia react-native-reanimated \
  react-native-worklets react-native-gesture-handler expo-haptics expo-sensors
npm install @zen/skia-motion

Kräver en development build (inte Expo Go) eftersom Skia/Reanimated/worklets har native delar. Se peer-intervallen i package.json.

Import

import { MotionProvider, ShaderCanvas, createOmniShaderComponent } from '@zen/skia-motion';
import { SparklineTrend } from '@zen/skia-motion/dataviz';
import { BreathingFAB } from '@zen/skia-motion/micro';

En sub-export per Kategori: core (även tillgänglig från roten), dataviz, spatial, hypnotic, generative, liquid, particles, typography, depth, physics, micro, optics.

Vad en komponent lovar

  • Named export, en per fil, interface <Namn>Props exporteras också.
  • Alla rörelserelaterade props är valfria med rimliga defaults — en komponent renderas och animerar med noll obligatoriska props utöver de som bär faktisk data (t.ex. data i SparklineTrend).
  • Två motion-props är konventionen genom hela biblioteket när de är relevanta: animating?: boolean (komponentens egen kontinuerliga animation) och enabled?: boolean (per-komponent override av det globala motion-läget).
  • MotionProvider krävs inte. Varje komponent läser motion-läget via useMotionEnabled, som faller tillbaka på { enabled: true, reducedMotion: false } när ingen MotionProvider finns i trädet. MotionProvider är en valfri, global kill switch/reduced-motion-källa — inte ett kontrakt komponenterna kräver av konsumenten.
  • Reduced motion är komponentens eget ansvar. När reducedMotion är sant (via MotionProvider, eller OS-inställningen om providern saknas via Reanimateds useReducedMotion() i vissa komponenter) fryser kontinuerlig animation till ett statiskt men korrekt tillstånd — aldrig ett tomt eller trasigt UI. Det finns inget globalt fallback-UI; varje komponent avgör själv sin statiska form.
  • Gestbärande komponenter (i huvudsak micro/*) kräver GestureHandlerRootView någonstans ovanför sig i trädet, per react-native-gesture-handlers eget krav.

Vad som inte ingår i v1

  • Ingen webb. Skia på webben (@shopify/react-native-skia 2.6.2 via CanvasKit) har en känd, ofixad GPU-yteläcka vid omstorlek (docs/research/rn-skia-webblacka.md i huvudrepot, fixad uppströms i 2.7.0). Paketet gör inget uttalande om webbstöd förrän Skia-versionen och ett "browser"-exportvillkor är utredda.
  • Showcase, registry, tools/, och tester följer inte med — de är Labbets angelägenhet, inte Paketets.
  • Ingen byggd .d.ts; TypeScript-källan typas direkt av konsumentens tsc.

Version

0.0.1 är ett skelett — se wayfinder-karta #57. Ärende #72 publicerar 0.1.0 när ett demo-bevis finns. Den här katalogen publiceras inte av ärende #69.

Dependencies

Peer Dependencies

ID Version
@shopify/react-native-skia >=2.6.2 <2.7.0
expo >=57.0.0 <58
expo-haptics >=57.0.0 <58
expo-sensors >=57.0.0 <58
react >=19.0.0
react-native >=0.86.0 <1
react-native-gesture-handler >=2.32.0 <4
react-native-reanimated >=4.0.0 <5
react-native-worklets >=0.10.0 <1
Details
npm
2026-08-22 12:29:51 +02:00
1
UNLICENSED
985 KiB
Assets (1)
skia-motion-0.1.0.tgz 985 KiB
Versions (3) View all
0.1.1 2026-08-22
0.1.0 2026-08-22
0.0.1 2026-08-22