Digital Fingerprint

An animated, code-driven fingerprint built with semantic HTML, responsive CSS, and the Canvas 2D API. Thousands of particles travel from both sides of the screen and assemble into a cyan, violet, and yellow fingerprint while code fragments, circuit paths, and subtle motion reinforce the visual story.

This project is part of the FullStack Masterclass Code Lab.

Lesson and in-depth explanation: fullstackmasterclass.org/code-lab/digital-fingerprint

Highlights

• 7,600 animated fingerprint particles
• Deterministic particle placement for repeatable renders
• Canvas-rendered code fields, circuits, glow, and ambient particles
• Late ridge reveal that makes the final fingerprint feel solid and precise
• Pointer-driven parallax on desktop
• Click or tap to replay the formation
• Responsive portrait layout designed for mobile presentation
• Reduced-motion support
• No framework, package manager, or production dependency

Technology

• HTML5
• CSS3
• Vanilla JavaScript
• Canvas 2D API

Project Structure

digital-fingerprint/
|-- assets/
|   |-- digital-fingerprint-demo.gif
|   |-- digital-fingerprint-preview.png
|   `-- fingerprint-target.png
|-- app.js
|-- index.html
|-- LICENSE
|-- README.md
`-- styles.css

fingerprint-target.png is a precomputed transparent image used only as the particle target map and final ridge layer. The browser performs the animation; the asset is not a prerecorded effect.

Run Locally

No installation or build step is required. Start any static web server in the project directory.

Using Python:

python3 -m http.server 8000

Using PHP:

php -S localhost:8000

Then open http://localhost:8000.

A local server is recommended because JavaScript reads the fingerprint image pixels through Canvas. Browser security rules may block that operation when the page is opened directly with a file:// URL.

How It Works

1. Build the target map

JavaScript loads assets/fingerprint-target.png into an offscreen canvas and reads its pixel data. Pixels with enough alpha become possible destinations for the fingerprint particles.

2. Select repeatable particle targets

The candidates are shuffled with a seeded algorithm. The same input therefore produces the same selection and visual composition on every run.

3. Create the formation

Each particle starts beyond the left or right edge. A staggered delay and exponential easing move it toward its sampled fingerprint coordinate. Small differences in depth, size, phase, and motion prevent the animation from feeling mechanical.

4. Add the visual system

Independent canvas passes draw the surrounding code fragments, circuit paths, ambient particles, central glow, fingerprint particles, and highlight flare. These layers are generated in real time.

5. Resolve the final fingerprint

Near the end of the formation, the original ridge image fades in with a screen blend. The timing preserves the illusion that the moving particles created the precise final shape while keeping the completed fingerprint crisp.

Controls

• Click or tap the fingerprint: replay the formation.
• Move the pointer across the fingerprint: add subtle depth and parallax.

Presentation Modes

The optional mode query parameter is useful for screenshots and video work.

URL	Behavior
/?mode=static	Shows the completed fingerprint immediately.
/?mode=video	Uses the video-specific headline size and plays the animation.
/?mode=video-static	Combines the video layout with the completed state.

Customize It

Useful starting points in app.js:

• fingerprintParticleCount controls fingerprint density.
• formationDelay controls when particle movement begins.
• formationDuration controls how long particles take to settle.
• codeFragments controls the words and symbols around the fingerprint.
• cyan and yellow control the outer particle color accents.
• fingerprintPlacement() controls the fingerprint scale and position.

The main color, spacing, typography, and responsive layout variables live in styles.css.

To use another target shape, replace assets/fingerprint-target.png with a transparent PNG. Keep the important shape in the alpha channel and preserve the filename, or update the image path at the bottom of app.js.

Accessibility and Performance

• The canvas is decorative and hidden from assistive technology.
• The surrounding page keeps meaningful headings and landmark elements.
• prefers-reduced-motion resolves the particle formation immediately.
• Canvas resolution is capped at a device pixel ratio of 2 to balance sharpness and rendering cost.
• A ResizeObserver recalculates the composition when the stage changes size.

Walkthroughs

• Full YouTube walkthrough: https://www.youtube.com/watch?v=rJy_dHv3KNs
• TikTok Code Lab version: https://www.tiktok.com/@fullstackmasterclass/video/7665444221297413408

The links will be added after both videos are published.

License

Released under the MIT License.

FullStack Masterclass

Build, code, and deploy production-ready web experiences with FullStack Masterclass.