Focus Brackets Text Effect
Four corner brackets fly in and lock around a blurry word, and the word snaps into focus as they land, like a camera finding its subject. The corners are one bordered element, rotated four ways.
Also known as: corner brackets animation css, viewfinder text effect, camera focus text.
Focus
HTML
<div class="txt-focus-brackets-text"><span class="txt-focus-brackets-text-frame"><span class="txt-focus-brackets-text-word">Focus</span><i style="--x: -1; --y: -1; --r: 0deg" aria-hidden="true"></i><i style="--x: 1; --y: -1; --r: 90deg" aria-hidden="true"></i><i style="--x: 1; --y: 1; --r: 180deg" aria-hidden="true"></i><i style="--x: -1; --y: 1; --r: 270deg" aria-hidden="true"></i></span></div>
CSS
.txt-focus-brackets-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.4);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.2;
display: inline-block;
color: var(--c);}
.txt-focus-brackets-text-frame {
position: relative;
display: inline-block;
padding: 0.1em 0.34em;
}
.txt-focus-brackets-text-word {
display: inline-block;
opacity: 0.4;
filter: blur(0.08em);
animation: txt-focus-brackets-text-sharpen 0.4s ease-out 0.5s forwards;
}
.txt-focus-brackets-text-frame i {
position: absolute;
width: 0.3em;
height: 0.3em;
border-top: 0.06em solid var(--c);
border-left: 0.06em solid var(--c);
border-top-left-radius: 0.06em;
opacity: 0;
animation: txt-focus-brackets-text-lock 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
}
.txt-focus-brackets-text-frame i:nth-of-type(1) { top: 0; left: 0; }
.txt-focus-brackets-text-frame i:nth-of-type(2) { top: 0; right: 0; }
.txt-focus-brackets-text-frame i:nth-of-type(3) { bottom: 0; right: 0; }
.txt-focus-brackets-text-frame i:nth-of-type(4) { bottom: 0; left: 0; }
@keyframes txt-focus-brackets-text-lock {
0% { opacity: 0; transform: translate(calc(var(--x) * 0.5em), calc(var(--y) * 0.5em)) rotate(var(--r)); }
60% { opacity: 1; transform: translate(calc(var(--x) * -0.05em), calc(var(--y) * -0.05em)) rotate(var(--r)); }
100% { opacity: 1; transform: rotate(var(--r)); }
}
@keyframes txt-focus-brackets-text-sharpen {
to { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.txt-focus-brackets-text, .txt-focus-brackets-text *, .txt-focus-brackets-text::before, .txt-focus-brackets-text::after, .txt-focus-brackets-text *::before, .txt-focus-brackets-text *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.