Skip to content

feat: add Scanner background component - #179

Merged
DavidHDev merged 2 commits into
DavidHDev:mainfrom
clanzhang:feat/add-scanner-background
Sep 21, 2026
Merged

DavidHDev merged 2 commits into
DavidHDev:mainfrom
clanzhang:feat/add-scanner-background

Conversation

@clanzhang

Copy link
Copy Markdown

Description

Ports the <Scanner /> background component from react-bits to Vue 3.

Closes #178

What it does

A retro CRT scanner background built with OGL WebGL2 shaders:

  • Vertical / horizontal / diagonal scan line sweep
  • 3-color gradient with chromatic aberration
  • Mouse-following glow interaction
  • CRT scanlines, film grain, and vignette effects

Changes

File Description
src/content/Backgrounds/Scanner/Scanner.vue Core component (Vue 3 port, Composition API + <script setup>)
src/demo/Backgrounds/ScannerDemo.vue Demo page with interactive controls (color pickers, sliders, direction select, mouse toggle)
src/constants/code/Backgrounds/scannerCode.ts Usage code snippet
src/constants/Components.ts Register scanner demo route
src/constants/Information.ts Add Scanner metadata
src/constants/Categories.ts Add to NEW array and Backgrounds sidebar

Dependencies

No new dependencies — ogl is already in package.json.

Checklist

  • Component follows existing OGL background pattern (e.g. Aurora.vue)
  • Demo page with color pickers, sliders, and prop table
  • No new npm dependencies required
  • Cleanup on unmount (cancelAnimationFrame, disconnect observers, lose WebGL context)
  • Visibility-aware (pauses when tab hidden or component scrolled out of viewport)
  • Build passes (npm run build)

Port Scanner background from react-bits. A retro CRT scanner effect
with sweep lines, chromatic aberration, scanlines, grain, vignette,
and mouse-following glow interaction. Built with OGL WebGL2 shaders.

Closes DavidHDev#178
@clanzhang

Copy link
Copy Markdown
Author

@Utkarsh-Singhal-26

@DavidHDev
DavidHDev merged commit 183e29d into DavidHDev:main Sep 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT]: Port Scanner background from react-bits

3 participants