Sentinel Console

Component

About

An animated SVG wall-mounted sensor console with a working iris lens diaphragm that opens and closes, tracks the pointer like a camera, and can be viewed from four projection angles.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sentinel Console to your project and fits it to your theme.

Code

How Sentinel Console is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { SentinelConsole } from "@/components/ui/sentinel-console";

export default function SentinelConsoleDemo() {
  const [, setAperture] = React.useState(0.55);

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
      <SentinelConsole
        behavior="watch"
        blades={8}
        plate="SENTINEL 7"
        onApertureChange={setAperture}
      />
    </div>
  );
}