CameraShy

Developers capture their own products constantly — for launch posts, demo videos, product walkthroughs, and team updates. However, live UI often contains sensitive data that was never meant to leave the screen: revenue metrics, customer PII, internal analytics, or API keys.

Existing privacy tools focus on deep, application-level security, creating an awkward gap for a simple visual safeguard. Developers are typically forced into tedious workarounds like post-processing recordings, manually hiding elements before filming, or maintaining complex mock datasets.

CameraShy bridges this gap as a lightweight layer-zero protection mechanism. It keeps sensitive UI fully visible and functional during normal use, but automatically obfuscates it the instant a capture shortcut or screen recording is triggered.

Showing a product often forces developers into an awkward trade-off: demonstrate the UI clearly, or protect the sensitive data inside it. Manual privacy precautions are easy to forget, forcing teams to rely on tedious workarounds, including:

• Editing screenshots and post-processing recordings after the fact
• Manually covering sensitive elements before recording starts
• Building custom logic and mock datasets specifically for demos and presentations

The solution

OS-level APIs can block screenshots entirely, but they are heavy and all-or-nothing — fine for banking apps, wrong for a product demo where you still need to show the UI. CameraShy is the lightweight alternative: it focuses on what gets visually captured, not locking down the underlying data. Sensitive UI stays fully visible and functional during normal use, then obfuscates the moment a capture shortcut or recording begins.

Core philosophy: honest design

CameraShy is not a security feature. It is a level-zero visual alternative: deterrence for accidental exposure and shoulder surfing, not cryptographic protection, and not a claim that a determined attacker cannot get around it.

Universal browser-level screenshot detection does not exist, so detection relies on heuristics. That is why the product is framed as a layer-zero safeguard rather than security theater — and why the docs state the limits first. The utility is built around four strict constraints:

• Sub-1KB Bundle Size — Zero bloat.
• Zero Dependencies — Passes security audits cleanly without supply-chain risk.
• Minimal API Surface — Impossible to misconfigure; fewer settings mean fewer ways to accidentally expose data.
• Transparent Limitations — Clear threat modeling.

Developer experience & API

CameraShy requires no context providers, configuration files, or initialization steps. The entire interface is controlled by two primary props: mode (failure behavior) and sensitivity (threat model).

Sensitivity tiers

Rather than offering a binary toggle, CameraShy provides three named sensitivity levels tailored to different threat models:

A naive implementation would attach event listeners to every protected element — 20 individual detectors on a page with 20 protected fields.

CameraShy uses a single, global useScreenshotDetection engine wired to an event bus. Every <CameraShy> component is a lightweight subscriber. That gives:

• O(1) listener overhead — cost stays constant regardless of UI complexity.
• Synchronous state — every element reacts at once.
• Zero reflow — protection triggers inline without shifting surrounding layout.

The detection engine is decoupled from React. React is a thin wrapper, so Vue, Svelte, and vanilla adapters can share the same core. Detection runs only on the client: the library no-ops during SSR and hydrates without mismatches.

npm i camerashy

import { CameraShy } from 'camerashy'

<CameraShy mode="blur" sensitivity="balanced">
  {sensitiveUi}
</CameraShy>

Zero dependencies is the other constraint that kept the surface honest. A dependency on a package this small is not free: bytes, version risk, and another line in a supply-chain review, for a thin layer of behavior. If the core could not be built from first principles, the API was already too large. The result is what the package claims: 0 dependencies, <1KB gzipped, nothing extra to audit.

GitHub · npm · camerashy.xyz

• API Design is UX: Suppressing complexity down to two props makes security implementations nearly foolproof.
• Scope Honesty Builds Trust: Transparently naming limitations earned credibility and organic adoption from a technical audience.
• Performance as a Feature: Sub-1KB size and zero dependencies were treated as non-negotiable product specifications rather than afterthoughts.

Roadmap

• First-class packages for Vue and Svelte.
• Explore OS-level capture signals so specific divs can be protected during screen recording — closer to platform blocking, still scoped to marked UI rather than the whole window.
• Maintained commitment to zero dependencies and a sub-1KB footprint.

Still iterating in the open — small, honest, and dependency-free.

~75 weekly downloads, with a peak of 150 installs per week — discovery came entirely through the package registry and the interactive demo doing the convincing that documentation alone could not. Sub-1KB gzipped and zero dependencies both held as hard constraints through every architectural decision, not as a clean-up pass at the end. And it proved that an honestly-scoped tool — one that tells you what it will not do — can still earn adoption from a technically literate audience that would reject an oversold claim on sight.