Source:CSS

Root

Setting up the background and colors for later down the line.

crt-screen.css.ts

1const background = createVar();
2const text = createVar();
3
4export const crtRootStyles = style({
5  display: 'grid',
6  placeItems: 'center',
7  inlineSize: '100cqw',
8  blockSize: '100cqh',
9  overflow: 'hidden',
10  containerType: 'inline-size',
11  background: 'black',
12  fontFamily: 'monospace',
13
14  vars: {
15    [background]: '#0c1e03',
16    [text]: '#537600',
17  },
18});

Screen

Styling the "screen" itself. At the same time, we'll be simulating a CRT screen distortion, the way the screen is not flat, but somewhat concave by using two radial gradients, set to overlay and multiply.

crt-screen.css.ts

1export const crtScreenStyles = style({
2  display: 'flex',
3  flexFlow: 'column nowrap',
4  inlineSize: '70cqw',
5  blockSize: '70cqh',
6
7  fontSize: '2rem',
8
9  background,
10
11  color: text,
12  textShadow: `0px 0px 10px ${text}`,
13
14  containerType: 'inline-size',
15
16  transform: 'translate3d(0px, 0px, 0px)',
17
18  borderRadius: '10px',
19  border: `solid 1px hsla(from ${text} h s l / 0.5)`,
20  boxShadow: `-1px 4px 20px 20px hsla(from ${text} h s l / 0.2)`,
21
22  overflow: 'hidden',
23
24  selectors: {
25    '&:after, &::before': {
26      content: '',
27      position: 'fixed',
28      inset: 0,
29
30      background: `radial-gradient(${[
31        'circle',
32        'white 0%',
33        'white 65%',
34        'hsla(from black h s l / 0.2) 100%',
35      ].join(', ')})`,
36
37      pointerEvents: 'none',
38    },
39
40    '&:before': {
41      mixBlendMode: 'multiply',
42    },
43    '&:after': {
44      mixBlendMode: 'overlay',
45    },
46  },
47});

Scroll

Setting up scrolling within the container

crt-screen.css.ts

1export const crtScrollContainerStyles = style({
2  overflowInline: 'hidden',
3  overflowBlock: 'auto',
4
5  position: 'relative',
6
7  scrollbarColor: `${text} ${background}`,
8  scrollbarWidth: 'thin',
9
10  containerType: 'inline-size',
11});

Content

Here we will be setting up the CRT scanlines and a slight flicker animation. Technically the scanlines and flicker should apply to the whole screen, but for now we want the lines to scroll with the content.

crt-screen.css.ts

1const crtFlickerAnimation = keyframes({
2  '0%': {
3    opacity: 0.01,
4  },
5  '50%': {
6    opacity: 0,
7  },
8});
9
10export const crtContentContainerStyles = style({
11  position: 'relative',
12
13  padding: '2.5rem',
14
15  boxSizing: 'border-box',
16
17  overflow: 'hidden',
18
19  selectors: {
20    '&:before, &:after': {
21      content: '',
22
23      position: 'absolute',
24      inset: 0,
25
26      pointerEvents: 'none',
27    },
28
29    '&:before': {
30      animationName: crtFlickerAnimation,
31      animationDuration: '50ms',
32      animationIterationCount: 'infinite',
33
34      background: 'hsla(from white h s l / 0.005)',
35    },
36
37    '&:after': {
38      background: 'repeating-linear-gradient(0deg, black, white 4px)',
39      mixBlendMode: 'overlay',
40    },
41  },
42});