# M encrypted text 2

> Terminal session — CLI commands decrypt sequentially on Enter

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/m-encrypted-text-2).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/m-encrypted-text-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/m-encrypted-text-2-light-6ad406458ae87cac.png
- Registry item: https://ui.cnippet.dev/r/m-encrypted-text-2.json
- Categories: encrypted text
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/m-encrypted-text-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/encrypted-text`

## Files

### `registry/default/motion-variants/m-encrypted-text-2.tsx`

```tsx
"use client";

import { useState } from "react";
import { EncryptedText } from "@/registry/default/motion/encrypted-text";

export default function EncryptedTextTerminal() {
  const [step, setStep] = useState(0);

  const commands = [
    "npx cnippet@latest add text-reveal",
    "npx cnippet@latest add scroll-reveal",
    "npx cnippet@latest add spinning-text",
  ];

  return (
    <div className="flex min-h-50 items-center justify-center px-6">
      <div className="w-full max-w-lg rounded-xl border border-border bg-neutral-950 p-5 shadow-xl">
        <div className="mb-3 flex items-center gap-1.5">
          <span className="h-3 w-3 rounded-full bg-red-500" />
          <span className="h-3 w-3 rounded-full bg-yellow-500" />
          <span className="h-3 w-3 rounded-full bg-green-500" />
        </div>
        <div className="space-y-2 font-mono text-sm">
          {commands.slice(0, step + 1).map((cmd, i) => (
            <div className="flex" key={cmd}>
              <span className="mr-2 text-neutral-500">$</span>
              <EncryptedText
                className="text-green-400"
                key={i}
                maxIterations={12}
                revealDirection="ltr"
                speed={35}
              >
                {cmd}
              </EncryptedText>
            </div>
          ))}
        </div>
        {step < commands.length - 1 && (
          <button
            className="mt-4 text-neutral-500 text-xs hover:text-neutral-300"
            onClick={() => setStep((s) => s + 1)}
            type="button"
          >
            Press Enter ↵
          </button>
        )}
      </div>
    </div>
  );
}
```