Usefuldevtools.com
β˜•

Digital Terminal

0 viewshard
Background:
Digital Terminal Card
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<div class="relative w-80 h-96 cursor-pointer select-none group">
  <!-- Terminal Glow Background -->
  <div class="terminal-glow absolute -inset-1 bg-gradient-to-r from-green-500/20 to-emerald-400/20 rounded-2xl blur-lg group-hover:from-green-400/30 group-hover:to-emerald-300/30 group-hover:blur-xl transition-all duration-500"></div>
  
  <!-- Scanlines -->
  <div class="scanlines absolute inset-0 opacity-20 group-hover:opacity-30 transition-opacity duration-500"></div>

  <!-- Main Terminal -->
  <div class="relative bg-black/95 rounded-2xl p-6 h-full border border-green-400/30 group-hover:border-green-400/50 transition-all duration-500 overflow-hidden font-mono">
    
    <!-- Terminal Header -->
    <div class="flex items-center justify-between mb-6 pb-4 border-b border-green-400/20">
      <div class="flex items-center gap-3">
        <div class="flex gap-2">
          <div class="w-3 h-3 bg-red-400 rounded-full opacity-60"></div>
          <div class="w-3 h-3 bg-yellow-400 rounded-full opacity-60"></div>
          <div class="w-3 h-3 bg-green-400 rounded-full opacity-100 animate-pulse shadow-lg shadow-green-400/50"></div>
        </div>
        <span class="text-green-300 text-sm">terminal@system</span>
      </div>
      <div class="text-green-400/60 text-xs terminal-time">
        12:34:56
      </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="space-y-3 flex-1">
      
      <!-- System Info -->
      <div class="space-y-1">
        <div class="text-green-300 text-sm">
          <span class="text-green-500">user@system:</span>
          <span class="text-blue-400">~</span>
          <span class="text-green-300">$ system --info</span>
        </div>
        <div class="text-green-400/80 text-xs ml-4">
          β–Έ OS: QuantumLinux v2.1.5
        </div>
        <div class="text-green-400/80 text-xs ml-4">
          β–Έ Kernel: 6.8.0-quantum
        </div>
        <div class="text-green-400/80 text-xs ml-4">
          β–Έ Uptime: 42 days, 13:37:21
        </div>
      </div>
      
      <!-- Status Indicators -->
      <div class="space-y-2 mt-6">
        <div class="flex items-center justify-between text-xs">
          <span class="text-green-300">CPU:</span>
          <div class="flex items-center gap-2">
            <div class="w-16 h-1.5 bg-green-900 rounded-full overflow-hidden">
              <div class="cpu-bar h-full bg-gradient-to-r from-green-500 to-green-300 rounded-full w-3/4 group-hover:w-5/6 transition-all duration-1000"></div>
            </div>
            <span class="text-green-400">74%</span>
          </div>
        </div>
        
        <div class="flex items-center justify-between text-xs">
          <span class="text-green-300">RAM:</span>
          <div class="flex items-center gap-2">
            <div class="w-16 h-1.5 bg-green-900 rounded-full overflow-hidden">
              <div class="ram-bar h-full bg-gradient-to-r from-emerald-500 to-emerald-300 rounded-full w-1/2 group-hover:w-3/5 transition-all duration-1000"></div>
            </div>
            <span class="text-green-400">58%</span>
          </div>
        </div>
        
        <div class="flex items-center justify-between text-xs">
          <span class="text-green-300">NET:</span>
          <div class="flex items-center gap-2">
            <div class="w-16 h-1.5 bg-green-900 rounded-full overflow-hidden">
              <div class="net-bar h-full bg-gradient-to-r from-cyan-500 to-cyan-300 rounded-full w-5/6 group-hover:w-full transition-all duration-1000"></div>
            </div>
            <span class="text-green-400">91%</span>
          </div>
        </div>
      </div>
      
      <!-- Active Processes -->
      <div class="mt-6 space-y-1">
        <div class="text-green-300 text-sm">
          <span class="text-green-500">user@system:</span>
          <span class="text-blue-400">~</span>
          <span class="text-green-300">$ ps aux | head</span>
        </div>
        <div class="text-green-400/60 text-xs space-y-0.5 ml-4">
          <div>quantum-core    β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–‘ 23.4MB</div>
          <div>neural-net      β–ˆβ–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘ 15.7MB</div>
          <div>crypto-daemon   β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘ 31.2MB</div>
          <div class="opacity-70">matrix-solver   β–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–‘β–‘ 19.8MB</div>
        </div>
      </div>
      
      <!-- Current Command Animation -->
      <div class="mt-6">
        <div class="text-green-300 text-sm flex items-center">
          <span class="text-green-500">user@system:</span>
          <span class="text-blue-400">~</span>
          <span class="ml-1 current-command">$ system --status</span>
          <div class="w-2 h-4 bg-green-400 ml-1 animate-pulse cursor-blink"></div>
        </div>
      </div>
      
    </div>
    
    <!-- Footer -->
    <div class="mt-6 pt-4 border-t border-green-400/20 flex items-center justify-between">
      <div class="text-green-400/60 text-xs">
        [SECURE SESSION]
      </div>
      <div class="flex items-center gap-1">
        <div class="w-1 h-1 bg-green-400 rounded-full animate-ping"></div>
        <span class="text-green-400/80 text-xs">ONLINE</span>
      </div>
    </div>
    
    <!-- Matrix Rain Effect -->
    <div class="matrix-rain absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-20 transition-opacity duration-1000">
      <div class="matrix-digit-1 absolute top-0 left-4 text-green-400/30 text-xs animate-pulse">01</div>
      <div class="matrix-digit-2 absolute top-8 left-12 text-green-400/30 text-xs animate-pulse">10</div>
      <div class="matrix-digit-3 absolute top-4 right-8 text-green-400/30 text-xs animate-pulse">11</div>
      <div class="matrix-digit-4 absolute top-12 right-16 text-green-400/30 text-xs animate-pulse">00</div>
      <div class="matrix-digit-5 absolute bottom-20 left-8 text-green-400/30 text-xs animate-pulse">01</div>
      <div class="matrix-digit-6 absolute bottom-16 right-12 text-green-400/30 text-xs animate-pulse">10</div>
    </div>
  </div>
</div>
Was this helpful?

What is inside Digital Terminal

Digital Terminal is a CSS button built with a keyframe animation, gradient fills, transforms, defined in 82 lines across 22 selectors.

15
CSS properties
22
Selectors
82
Lines of CSS
3
Formats

Techniques used

Keyframe animationTransitionsTransformsGradientsFiltersPseudo elementsHover state

Animations defined: terminal-scanterminal-blinkcommand-cycle

CSS properties in this component

animationanimation-delaybackground-imagecontentcursorfilterfont-familyheightopacitypositiontransformtransitiontransition-delayuser-selectwidth

Accessibility check3 to fix

  • Built from generic elements. Add a role and a tabindex, or swap in a native control, before using it as an interactive component.
  • No focus style is defined. Add one before shipping, or keyboard users lose track of position.
  • Animates without a prefers-reduced-motion guard. Wrap the animation in that query if motion sensitivity matters to your audience.

These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in HTML, CSS, Tailwind and adapt it freely.

About Digital Terminal

Digital Terminal is a card built with a keyframe animation, gradient fills, transforms, CSS filters and pseudo elements. Its stylesheet runs to 82 lines across 22 rules, declaring 15 distinct properties. It styles hover state explicitly, so the component responds to interaction rather than sitting still. The animation is driven by keyframe sequences named terminal-scan, terminal-blink and command-cycle, which you can retime or remove without touching the rest of the styling. Every format shown on this page is the same component, so you can take HTML, CSS and Tailwind depending on how your project is set up. Nothing is minified and nothing depends on a framework.

When to use

How it works

The base rule sets the shape with height, position and width. The fill is a gradient rather than a flat colour, so it is a single background declaration with no image to load. A pseudo element carries part of the effect, which keeps the markup to one element while giving the CSS a second surface to animate. Movement is done with transforms rather than by changing position or size, which is what keeps it smooth: transforms are composited and do not force the browser to lay the page out again. State changes are eased with a transition, so hovering does not snap. The looping motion comes from terminal-scan, terminal-blink and command-cycle. Changing the animation-duration is usually the only edit needed to make it faster or calmer.

Accessibility

Keyboard navigation
Limited
Screen reader
Limited
ARIA
Needs a role and a label to be announced correctly

Built from generic elements. Add a role and a tabindex, or swap in a native control, before using it as an interactive component. No focus style is defined. Add one before shipping, or keyboard users lose track of position. Animates without a prefers-reduced-motion guard. Wrap the animation in that query if motion sensitivity matters to your audience. Those are 3 things to fix before this ships in front of users.

Browser support

Chrome
26+
Firefox
16+
Safari
9+
Edge
12+

Everything this component uses has been supported across browsers for years, so no fallback is needed.

Frequently asked questions