Retro Handheld Screen
A pocket-console style card in four greens: a screen that tints all its content green with a CSS filter, a row of breathing blocks and a score line.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Distortion has 31 effects, including 5 free. Explore the category →
3 usage examples
How it works
.pkc-card is a 240 px card with a light green background and a very dark green border. All its colours come from four variables, darkest to lightest: --pkc-0 #0f380f, --pkc-1 #306230, --pkc-2 #8bac0f, --pkc-3 #9bbc0f. The title ("PLAYER 1") and the score ("SCORE: 999999") use Courier New.
The .pkc-screen (80 px tall) carries a filter: sepia(100%) hue-rotate(50deg) saturate(400%) brightness(80%) contrast(120%). Everything inside turns green: the small 8×6 sprite provided, or your own <img> or <svg> placed as a direct child, which then fills it. The result is a continuous green tint, not a true four-colour reduction.
Below the screen, six 28 px blocks repeat the four shades and shrink to 85 % then come back, over 3 s, every other block half a second later (pkcPulse animation). No JavaScript: the sprite is written once in the HTML (the old version added it a second time from a script, hence a doubled, clipped drawing).
Accessibility
- Readable text: the title and the score are real text. The sprite and the block row, purely decorative, have
aria-hidden="true". - Tinted picture: if you put a picture in the screen, give it an
alt; the filter changes nothing for a screen reader. - Contrast: the
#0f380ftitle on#9bbc0freaches about 6:1; the score uses the same--pkc-0shade, at the same contrast. The--pkc-1shade (#306230) only reaches about 3.3:1 on this background: avoid it for small text. - Reduced motion: under
prefers-reduced-motion: reduce, the blocks stop breathing; the card stays the same, still.
Browser compatibility
CSS only, no dependency. filter and CSS variables have been everywhere for a long time; the most recent feature is gap in a flex box (Chrome 84, Firefox 63, Safari 14.1 according to MDN data). Measured in Chromium 151, Firefox 153 and WebKit 26.5: a single sprite (60 elements per card instead of 108), two identical copies, nothing added to window, fluid width up to 100 %.
Without flex gap, title, screen, blocks and score touch each other but stay readable. Without filter, the screen keeps its content's original colours.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0277-root">
<div class="pkc-card">
<div class="pkc-title">PLAYER 1</div>
<div class="pkc-screen">
<div class="pkc-sprite" aria-hidden="true">
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c3"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c3"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
</div>
</div>
<div class="pkc-row" aria-hidden="true">
<div class="pkc-block"></div>
<div class="pkc-block"></div>
<div class="pkc-block"></div>
<div class="pkc-block"></div>
<div class="pkc-block"></div>
<div class="pkc-block"></div>
</div>
<div class="pkc-score">SCORE: 999999</div>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
The four shades (CSS — --pkc-0 to --pkc-3) |
#0f380f, #306230, #8bac0f, #9bbc0f |
Swap them for four greys or four blues: card, sprite and blocks follow. Keep the darkest-to-lightest order. |
Screen content (HTML — child of .pkc-screen) |
8×6 sprite | An <img> or <svg> as a direct child fills the screen (object-fit: cover) and takes the green tint. |
Screen filter (CSS — --pkc-filter) |
sepia(100%) hue-rotate(50deg) saturate(400%) brightness(80%) contrast(120%) |
none keeps the original colours; grayscale(1) contrast(1.4) gives a grey screen. |
Sizes (CSS — --pkc-w, --pkc-screen-h) |
240 px, 80 px screen | --pkc-w: 100% fills the parent; make the screen taller for a picture. |
Blocks and sprite (CSS — --pkc-block, --pkc-pixel) |
28 px, 6 px | In a small card, 9 px and 4 px; check that the six blocks fit the width. |
Texts (HTML — .pkc-title, .pkc-score) |
"PLAYER 1", "SCORE: 999999" | User name, level, points: free text, read by screen readers. |
Demo frame (CSS — --pkc-page, --pkc-root-h) |
#0a0a0f, at least 300 px tall |
transparent and 0 drop the card into your page. |
FAQ
.pkc-sprite grid has 8 columns; each cell is a <span> with a pkc-c0 to pkc-c3 class (darkest to lightest). Change the classes, add rows of 8 cells: the grid adapts.prefers-reduced-motion: reduce, they stay at their normal size; the rest of the card never moves anyway.
