CRT 화면

CRT Screen

입력 이미지에 RGB 형광 줄무늬와 수평 주사선, 가장자리 어둡기를 더해 브라운관 화면처럼 보이게 합니다.

다른 이름: CRTScreenCRT monitorscanlines

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, CRTScreen, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <CRTScreen />
    </Shader>
  )
}

Vue

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script setup lang="ts">
import { Shader, CRTScreen, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/photo.jpg"/>
    <CRTScreen/>
  </Shader>
</template>

Svelte

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script>
  import { Shader, CRTScreen, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/photo.jpg" />
  <CRTScreen />
</Shader>

Solid

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, CRTScreen, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <CRTScreen />
    </Shader>
  )
}

JavaScript

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/photo.jpg',
      },
    },
    {
      type: 'CRTScreen',
    }
  ]
}, { disableTelemetry: true })

속성(props) · `CRTScreen`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름	값	기본값	범위·선택지	설명(원문)
`pixelSize`Pixel Size	128	128	8 – 128 (step 1)	Density of the RGB phosphor stripes — about half this many across the canvas width (higher = smaller, finer pixels)
`colorShift`Color Shift	1	1	0 – 10 (step 0.1)	Chromatic aberration amount
`scanlineIntensity`Scanline Intensity	0.3	0.3	0 – 1 (step 0.1)	Strength of horizontal scanlines
`scanlineFrequency`Scanline Frequency	200	200	100 – 800 (step 10)	Number of scanlines across screen
`brightness`Brightness	1	1	0.5 – 2 (step 0.1)	Screen brightness boost
`contrast`Contrast	1	1	0.5 – 2 (step 0.1)	Screen contrast enhancement
`vignetteIntensity`Vignette Intensity	1	1	0 – 1 (step 0.1)	Strength of corner darkening effect (0 = off)
`vignetteRadius`Vignette Radius	0.5	0.5	0 – 1 (step 0.01)	How far the vignette extends inward (0 = edges only, 1 = reaches center)

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

화면 위에 브라운관 유리와 형광 픽셀 격자를 덧씌운 듯한 효과입니다. 오래된 게임 화면을 카메라로 찍었을 때 보이는 주사선과 색 어긋남을 떠올리면 됩니다.

`pixelSize`는 기본 128이며 8–128에서 조절하고, 값을 높이면 RGB 줄무늬가 더 촘촘해집니다. `scanlineIntensity`는 기본 0.3이며 0–1, `scanlineFrequency`는 기본 200이며 100–800에서 주사선의 강도와 수를 바꿉니다. `colorShift`는 기본 1이며 0–10, `vignetteIntensity`는 기본 1이며 0–1에서 색 분리와 모서리 어둡기를 조정합니다.

먼저 표시할 이미지나 영상 레이어가 있어야 효과가 보입니다. `VHS`나 `FilmGrain`과 함께 쓰면 낡은 영상 인상을 더할 수 있지만, 주사선과 색 어긋남을 강하게 하면 화면의 작은 글자와 UI 경계가 흐려집니다.

언제 쓰나

레트로 게임 화면, 뮤직비디오 배경, 아날로그 화면을 흉내 내는 포스터에 좋습니다. 숫자나 작은 인터페이스를 정확히 읽혀야 할 때는 피하세요.

속성(props) · CRTScreen

함께 보기

VHS 테이프VHS

글리치Glitch

필름 그레인Film Grain

색수차Chromatic Aberration

언제 쓰나

속성(props) · `CRTScreen`