HoloDex 151

A collectible creature card demo built with React Native + Expo, recreating a TCG template and the reflective behavior of Pokémon Cards 151. The project features four original characters created specifically for this demo and does not use any official Pokémon logos or artwork.

Card face template

• Uses the physical card aspect ratio of 63:88, closely matching the cards on the reference website.
• The layout includes a metallic border, stage/evolution details, name, HP, type symbol, landscape artwork frame, classification plaque, ability/attack information, weakness/resistance/retreat details, and a collector footer.
• CardFace renders the complete front face on the detail screen, while the gallery uses the monochrome CollectionCardBack to create the feel of an unopened collection.
• The card back includes organic contours, a centered collector seal, corner details, and a small marker at the bottom. It is built entirely with React Native views, keeping it crisp at every size.

Effect scope

• The gallery does not run shaders or per-frame animations.
• Only the detail screen renders the card with Skia and responds to gestures and sensors.
• The tilt closely follows the website's formula: perspective(600), with a maximum X-axis rotation of approximately ±25° and Y-axis rotation of approximately ±14.25°.
• The touch position simultaneously controls the radial glare, rainbow foil band, scanlines, and two texture layers that move in opposite parallax directions.
• The vector Poké Ball pattern is completely hidden at rest, gradually appears as the card tilts, and moves with parallax in the opposite direction from the light.
• When released, the card returns to the center with a spring animation. On a physical device, the rotation sensor takes over the motion.
• Reduce Motion keeps the card flat and reduces the glare intensity.

Four demo finishes

Card	Finish	Characteristics
Verdant Sproutling	Double Rare	hard-light foil + micro-glitter
Ember Drake	Rare Holo	color-dodge rainbow + pronounced scanlines
Tide Fox	Special Illustration	soft-light iridescence + subtle texture
Astral Lynx	Hyper Rare	gold/rainbow foil + denser noise and glitter

Tech stack

• Expo SDK 57, React Native 0.86, Expo Router
• React Native Reanimated 4 + Worklets: all per-frame updates run on the UI thread
• React Native Gesture Handler: card touch and drag interactions
• React Native Skia 2.6: blend modes, gradients, glare, noise, and clipping
• Expo Haptics and useAnimatedSensor(ROTATION)
• Expo Image for artwork rendered inside the card template

The web build loads CanvasKit asynchronously through index.web.ts and uses the matching WASM version from the CDN. The native bundle does not include this web-only file.

Run the project

npm install
npx expo start

Then press i, a, or w to open the project on iOS, Android, or the web.

npm run typecheck
npm run lint

Key source files

• src/app: thin routes and the Expo Router root layout.
• src/features/cards/components/holo-card.tsx: the 3D + Skia pipeline, gestures, sensors, and reduced motion support.
• src/features/cards/components/card-face.tsx: the responsive front-face template.
• src/features/cards/components/collection-card-back.tsx: the static card back used in the gallery.
• src/features/cards/data/cards.ts: data and finish presets for the four cards.
• src/features/cards/screens: screen composition for the gallery and detail view.
• src/features/cards/theme/card-template.ts: card-specific aspect ratio and palette.
• src/shared/theme: shared color, spacing, typography, and motion tokens.