0.1.0

@0610studio/expo-holographic-card

Holographic card components for Expo and React Native. It combines Skia lighting, 3D tilt, tap/swipe flip, and optional device-motion control in one component.

Documentation: https://0610studio.github.io/expo-holographic-card/

Demos

Installation

npx expo install @0610studio/expo-holographic-card @shopify/react-native-skia react-native-reanimated react-native-gesture-handler expo-sensors

AnimatedCard uses GestureDetector, so wrap your app root with GestureHandlerRootView. If your project needs Reanimated's Babel plugin, add react-native-reanimated/plugin to your Babel config.

Quick Start

import AnimatedCard, { CardOrientation, LightingType } from '@0610studio/expo-holographic-card';

export function CardPreview() {
  return (
    <AnimatedCard
      orientation={CardOrientation.Horizontal}
      radius={24}
      frontImageSource={require('./assets/card.png')}
      lightingType={LightingType.Prismatic}
      showTexture
    />
  );
}

Custom Faces

import { AnimatedCard, CardOrientation, DefaultCardBack } from '@0610studio/expo-holographic-card';
import { Text, View } from 'react-native';

export function CustomCard() {
  return (
    <AnimatedCard
      orientation={CardOrientation.Vertical}
      frontImageSource={require('./assets/card.png')}
      frontComponent={({ radius }) => (
        <View style={{ flex: 1, justifyContent: 'space-between', padding: 24, borderRadius: radius }}>
          <Text style={{ color: 'white', fontWeight: '800' }}>HOLO CARD</Text>
          <Text style={{ color: 'white', fontSize: 28, fontWeight: '900' }}>HOLO PASS</Text>
        </View>
      )}
      backComponent={({ width, height }) => (
        <DefaultCardBack width={width} height={height} />
      )}
    />
  );
}

Local Development

pnpm install
pnpm build
pnpm test --runInBand
pnpm --dir example typecheck
pnpm docs:build

Example app:

pnpm example
pnpm example:ios
pnpm example:android

Support

• Tested with Expo 56 and React Native 0.85+.
• Lighting layers are rendered with @shopify/react-native-skia.
• Tilt and flip animations use react-native-reanimated and react-native-gesture-handler.
• Sensor mode uses DeviceMotion from expo-sensors.

License

MIT