Swiss Grid
Entrance & Kinetic · Animated · pure CSS
A drafting-table poster assembly: thin hairline rules snap in along strict horizontal and vertical axes on flat, un-eased linear timing, the word translates in on one axis and stops dead — no bounce — then a thick Swiss-red accent bar slides in and docks flush against the type before the scaffold dissolves. What remains is an asymmetric two-color wordmark-and-bar poster: hard orthogonal construction and zero easing, the deliberate opposite of every springy entrance.
How it works
Swiss Grid is an animated entrance & kinetic text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Swiss Grid exposes 4 dedicated controls — Accent Hue, Rule Count, Duration and Bar Position — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Swiss Grid — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Recursive', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Recursive', sans-serif;
font-weight: 400;
letter-spacing: -2px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
overflow: hidden;
line-height: 1.15;
padding: 0.5em 0.85em 0.5em 0.34em;
}
.text-effect .fx-rule-h,
.text-effect .fx-rule-v {
position: absolute;
background: hsl(0 0% 97%);
opacity: 0;
pointer-events: none;
z-index: 0;
}
.text-effect .fx-rule-h {
left: 0;
right: 0;
height: 1px;
top: var(--pos);
transform-origin: var(--org) center;
animation: text-effect-ruleh 2.00s linear both;
}
.text-effect .fx-rule-v {
top: 0;
bottom: 0;
width: 1px;
left: var(--pos);
transform-origin: center var(--org);
animation: text-effect-rulev 2.00s linear both;
}
.text-effect .fx-word {
position: relative;
z-index: 2;
display: inline-block;
white-space: pre;
color: hsl(0 0% 97%);
animation: text-effect-word 2.00s linear both;
}
.text-effect .fx-bar {
position: absolute;
z-index: 1;
background: hsl(149 82% 52%);
top: 0;
bottom: 0;
left: 0;
width: 0.34em;
animation: text-effect-bar 2.00s linear both;
}
.text-effect:hover .fx-rule-h {
animation-name: text-effect-ruleh-r;
}
.text-effect:hover .fx-rule-v {
animation-name: text-effect-rulev-r;
}
.text-effect:hover .fx-word {
animation-name: text-effect-word-r;
}
.text-effect:hover .fx-bar {
animation-name: text-effect-bar-r;
}
@keyframes text-effect-ruleh {
0% { opacity: 1; transform: scaleX(0); }
34% { opacity: 1; transform: scaleX(1); }
72% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes text-effect-rulev {
0%, 8% { opacity: 1; transform: scaleY(0); }
44% { opacity: 1; transform: scaleY(1); }
76% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes text-effect-word {
0%, 30% { opacity: 0; transform: translateX(-1.5em); }
31% { opacity: 1; transform: translateX(-1.5em); }
58%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes text-effect-bar {
0%, 57% { opacity: 0; transform: translateY(-100%); }
58% { opacity: 1; transform: translateY(-100%); }
80%, 100% { opacity: 1; transform: translateY(0%); }
}
@keyframes text-effect-ruleh-r {
0% { opacity: 1; transform: scaleX(0); }
34% { opacity: 1; transform: scaleX(1); }
72% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes text-effect-rulev-r {
0%, 8% { opacity: 1; transform: scaleY(0); }
44% { opacity: 1; transform: scaleY(1); }
76% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes text-effect-word-r {
0%, 30% { opacity: 0; transform: translateX(-1.5em); }
31% { opacity: 1; transform: translateX(-1.5em); }
58%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes text-effect-bar-r {
0%, 57% { opacity: 0; transform: translateY(-100%); }
58% { opacity: 1; transform: translateY(-100%); }
80%, 100% { opacity: 1; transform: translateY(0%); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Entrance & Kinetic
- Type
- Animated
- Browser support
- 1px hairline rule scaffold + linear-timed transforms (all modern browsers)
- Capabilities
- pure