An interactive UI simulation featuring a draggable credit card stream moving through a dynamic WebGL and Canvas2D particle scanner.
Welcome to Card Scanner, an immersive visual component that implements an elegant, highly responsive draggable credit card stream passing through a tech-themed particle scanner. Leveraging additive blending, dynamic mask clipping, and custom WebGL layouts, it represents state-of-the-art interactive UI styling in Obsidian.
- 🔄 Smooth Inertia: Touch and mouse grabbable card stream with responsive physical slide inertia.
- 📐 Edge Wrap: Endless loop wrapping logic seamlessly repositioning cards as they exit viewport bounds.
- ✨ WebGL Background: Runs a Three.js particle field in the background with custom shader additive blending.
- ⚡ 2D Canvas Scanner: Triggers intense particle burst emissions dynamically mapped to the position of cards passing the center scanner line.
- 📝 X-Ray Code View: Unveils glowing animated ASCII code wireframes underneath the cards via dynamic CSS
clip-pathmasks. - 💫 Real-time Glitch & Shift: Adds authentic retro tech terminal scanning glitches to reveal underlying card data.
The package exposes the following files:
| File | Description |
|---|---|
CARD SCANNER.md |
Main view controller containing the execution entry point script. |
src/index.jsx |
Primary view factory and workspace state leaf container. |
src/components/ScannerComponent.jsx |
UI controller housing logic for WebGL fields, physics drag streams, and canvas lasers. |
src/styles/styles.jsx |
CSS custom properties mapping host theme styles to local components. |
src/utils/domUtils.jsx |
DOM traversal helper functions. |
METADATA.md |
Machine-readable manifest file containing indexing properties. |
CONTRIBUTION.md |
Core contribution guidelines. |
LICENSE.md |
MIT open-source license. |