@newgenesis/vision

Professional bot & AI detection library with behavioral analysis, fingerprinting, and adaptive challenges.

npm: https://www.npmjs.com/package/@newgenesis/vision

Installation

npm install @newgenesis/vision
# or
yarn add @newgenesis/vision

Import default Vision styles

The package ships with a ready-to-use CSS file that contains the default Vision styling (including the vision-container class and glass UI tokens):

// In your React/Next.js entry (e.g. _app.tsx or layout.tsx)
import '@newgenesis/vision/styles.css';

This automatically makes the Vision glass design tokens and base container styles available in your app.

Quick Start – React Glass Example

Below is a minimal React example that reproduces the same glass UI as the product demo (email field + "Je ne suis pas un robot" block + footer links), using the vision-container styling and inline glass effects.

import React from 'react';
import '@newgenesis/vision/styles.css';

export function VisionGlassExample() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-black text-white p-6 sm:p-8 lg:p-12">
      <div
        className="w-full md:w-1/2 p-6 sm:p-8 lg:p-12 rounded-2xl min-h-[500px] sm:min-h-[650px] flex items-center justify-center relative overflow-hidden"
        id="vision-container"
        style={{
          background: 'rgba(0, 0, 0, 0.3)',
          backdropFilter: 'blur(24px) saturate(180%)',
          WebkitBackdropFilter: 'blur(24px) saturate(180%)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          boxShadow:
            'inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 2px 3px 0 -1px rgba(255, 255, 255, 0.15), inset -2px -2px 0 -1px rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.2)',
          ['--vision-primary' as any]: '#4a4aff',
        }}
        data-vision-theme="Raven"
      >
        <div className="w-full max-w-sm sm:max-w-md">
          <div className="vision-container space-y-4">
            {/* Email */}
            <div className="space-y-2">
              <label
                htmlFor="vision-email"
                className="block text-sm font-medium"
                style={{
                  color: '#ffffff',
                  textShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
                }}
              >
                Adresse e-mail
              </label>
              <input
                id="vision-email"
                type="email"
                placeholder="[email protected]"
                className="w-full px-5 py-3 rounded-2xl transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:scale-[1.02]"
                style={{
                  background: 'rgba(255, 255, 255, 0.05)',
                  backdropFilter: 'blur(20px) saturate(180%)',
                  WebkitBackdropFilter: 'blur(20px) saturate(180%)',
                  border: '1px solid rgba(255, 255, 255, 0.1)',
                  color: '#ffffff',
                  boxShadow:
                    'inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 2px 3px 0 -1px rgba(255, 255, 255, 0.15), inset -2px -2px 0 -1px rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.15)',
                }}
                autoComplete="off"
                defaultValue=""
              />
            </div>

            {/* Checkbox bloc */}
            <div
              className="relative inline-flex items-center gap-2 sm:gap-3 px-5 sm:px-6 py-4 rounded-2xl cursor-pointer transition-all duration-300 overflow-hidden group mx-auto min-h-[64px] sm:min-h-[72px] hover:scale-[1.02]"
              style={{
                background: 'rgba(255, 255, 255, 0.05)',
                backdropFilter: 'blur(20px) saturate(180%)',
                WebkitBackdropFilter: 'blur(20px) saturate(180%)',
                border: '1px solid rgba(255, 255, 255, 0.1)',
                boxShadow:
                  'inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 2px 3px 0 -1px rgba(255, 255, 255, 0.15), inset -2px -2px 0 -1px rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.15)',
                transform: 'translateZ(0)',
                willChange: 'transform',
              }}
            >
              <div
                className="flex items-center justify-center w-6 h-6 sm:w-7 sm:h-7 rounded-lg transition-all duration-300"
                style={{
                  background: 'rgba(255, 255, 255, 0.15)',
                  backdropFilter: 'blur(12px) saturate(180%)',
                  WebkitBackdropFilter: 'blur(12px) saturate(180%)',
                  border: '1px solid rgba(255, 255, 255, 0.25)',
                  boxShadow:
                    'inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.2), inset -2px -2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.12)',
                }}
              />
              <div className="flex flex-col">
                <span
                  className="text-xs sm:text-sm font-medium leading-none whitespace-nowrap transition-colors duration-300"
                  style={{
                    color: '#ffffff',
                    textShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
                  }}
                >
                  Je ne suis pas un robot
                </span>
                <span className="mt-1 text-[10px] sm:text-xs text-white/60 flex items-center gap-1">
                  <span>Vision, conçu par</span>
                  <a
                    href="https://newgenesis.ai"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="relative inline-block text-white/70 hover:text-white"
                  >
                    NewGenesis
                  </a>
                </span>
              </div>
            </div>

            {/* Links */}
            <div className="mt-3 flex items-center justify-center gap-4 text-xs">
              <a
                className="relative transition-colors duration-300 group"
                style={{ color: '#9ca3af' }}
                target="_blank"
                href="/conditions/"
              >
                Conditions
                <span
                  className="absolute left-0 bottom-0 w-full h-0.5 transform scale-x-0 origin-right transition-transform duration-500 group-hover:scale-x-100 group-hover:origin-left"
                  style={{ backgroundColor: '#4a4aff' }}
                />
              </a>
              <span className="text-gray-300">•</span>
              <a
                className="relative transition-colors duration-300 group"
                style={{ color: '#9ca3af' }}
                target="_blank"
                href="/confidentiality/"
              >
                Confidentialité
                <span
                  className="absolute left-0 bottom-0 w-full h-0.5 transform scale-x-0 origin-right transition-transform duration-500 group-hover:scale-x-100 group-hover:origin-left"
                  style={{ backgroundColor: '#4a4aff' }}
                />
              </a>
            </div>

            {/* Refresh button */}
            <div className="mt-3">
              <button
                type="button"
                className="px-3 py-2 text-xs font-semibold rounded-lg border border-white/10 text-white/90 hover:text-white hover:bg-white/10 transition-colors"
              >
                Rafraîchir l&apos;aperçu et relancer le test
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

💡 Responsive: the container uses w-full md:w-1/2 so it takes 100% width on mobile and 50% on larger screens, as in the product example.

Using Vision core APIs

The library exports core classes and types for advanced integrations:

import {
  Vision,
  VisionCore,
  VisionStandalone,
  type VisionConfig,
  type VisionResult,
} from '@newgenesis/vision';

• VisionStandalone: Vanilla JS / browser helper (also used by the global window.Vision in the browser bundle).
• VisionCore: Low-level engine used to collect signals and compute bot/human scores.

For detailed server & advanced usage (Network Shield, Redis, clustering, ML pipelines, etc.), see the full documentation in docs/README.md of the repository.

Browser bundle (vanilla JS)

A standalone browser bundle is also built and exposed under dist/browser/browser.js. When you include it in a page, it registers a global window.Vision object:

<script src="/path/to/node_modules/@newgenesis/vision/dist/browser/browser.js"></script>
<script>
  window.Vision.init({
    elementId: 'vision-container',
    mode: 'checkbox',
    debug: true,
    onResult: (result) => {
      console.log('Vision result:', result);
    },
  });
</script>

This is the same API used in the examples/basic-html and examples/vanilla-js demos in the repository.

Documentation

• Full technical documentation: see docs/README.md in the GitHub repository (mirrored in this package under docs/).
• Product & company: https://newgenesis.ai
• npm package: https://www.npmjs.com/package/@newgenesis/vision

License

MIT © NewGenesis