sensitive-image-review

Summary

Content moderation can be challenging, especially when reviewing graphic images. This NPM package empowers reviewers with tools to minimize psychological strain by applying layers such as blurred and grayscale over content.

Spotlight controls allow reviewers to focus on specific areas of an image with precision. Other safety features, including a "Panic Button" and keyboard shortcuts, ensure a streamlined and secure workflow for handling sensitive content.

While we truly believe that using this package in any content moderation tool is a wise decision, we make no specific claims regarding health benefits or safety, and we provide no warranty either. Give it a try and reach your own conclusions.

Technical Features

• Canvas-based rendering with blurred baseline view
• Circular feathered spotlight reveal around mouse/keyboard focus
• Blur strength slider with support for 0 blur
• Safety actions: Unblur All / Blur All toggle and Panic re-blur
• Keyboard support with built-in mappings (arrows, wasd) and custom key maps
• Inline control tooltips showing relevant shortcut hints
• Exposure event stream (blur-change, spotlight-active, spotlight-off, grayscale-toggle, panic)
• Debounced logging for continuous interactions
• Composable API layers: SensitiveViewer, SensitiveCard, and SensitiveFullView
• ESM/CJS library output with TypeScript declarations

Implementation Overview

• SensitiveViewer is the core canvas renderer and interaction engine.
• SensitiveCard is a compact wrapper for gallery contexts.
• SensitiveFullView is a larger wrapper for focused review tasks.
• Toolbar groups controls by function:
  • Image controls: blur slider, grayscale toggle
  • Spotlight controls: on/off toggle, radius slider, movement hint
  • Safety controls: unblur/blur toggle, panic button

Default keyboard mappings:

• arrows: arrows move spotlight, +/- adjust radius, S toggles spotlight, G toggles grayscale, Escape panic
• wasd: W/A/S/D move spotlight, [/] adjust radius, E toggles spotlight, Q toggles grayscale, Escape panic

Install

npm install sensitive-image-review

Quick Start

import { SensitiveCard, SensitiveFullView, SensitiveViewer } from "sensitive-image-review";

export function Example() {
  return (
    <div style={{ display: "grid", gap: 16 }}>
      <SensitiveCard src="/sample.jpg" alt="Reported content thumbnail" />
      <SensitiveFullView src="/sample.jpg" alt="Reported content detailed review" />
      <SensitiveViewer src="/sample.jpg" alt="Composable core" showControls minBlur={0} />
    </div>
  );
}

Core Props (SensitiveViewer)

• src, alt
• initialBlur, initialGrayscale, minBlur, maxBlur
• spotlightRadius, minSpotlightRadius, maxSpotlightRadius
• keyMap, spotlightSpeed
• showControls, compactControls, controlsPosition
• viewportAspectRatio, minViewportHeight, maxViewportHeight
• onExposure

Public Components

• SensitiveViewer: composable base component
• SensitiveCard: compact wrapper for grid/card presentation
• SensitiveFullView: full-size wrapper for dedicated review views

Exposure Logging

Use onExposure to receive events:

• blur-change
• spotlight-active
• spotlight-off
• grayscale-toggle
• panic

Continuous events are debounced by the internal useExposureLog hook.

Development

npm run storybook
npm run typecheck
npm run build
npm run lint

Publishing

The package exports ESM/CJS builds and .d.ts files from dist/.

License

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.