Reveals
Diamond Open Reveal
A diamond-shaped window opening outward.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.diamond-open {
transform: translate3d(180px, 100px, 0);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
width: 120px;
height: 120px;
background: #6366f1;
border-radius: 20px;
animation: diamond-open-anim 900ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes diamond-open-anim {
0% {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
100% {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
}
@media (prefers-reduced-motion: reduce) {
.diamond-open {
animation: none;
transition: none;
}
}Why it is built this way
A polygon whose four points move together. Every point must stay in the same order across keyframes — CSS interpolates polygons point by point, and reordering them produces a fold rather than a grow.
What it animates
4 properties across 1 CSS declaration. The bar shows when each one is moving.
clip-pathclip-pathclip-pathclip-pathWhat it costs to run
Clip-path repaint on every frame rather than running on the compositor. There is no reflow, so this is far cheaper than animating width or height — but keep the painted area modest.
It runs for 0.90s across 8 keyframe stops, with every property moving over the same window.
One curve throughout: Back Out on a plain box. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — clip-path move over 0.90s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.