Reflection Scroll Effect

A decorative reflection effect where we simulate a reflected page and scroll it along with the content.

By Manoela Ilic in Playground on February 15, 2024

Demo Code

From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.

The other day I was marvelling over this amazing animation by Jurica Koletic that he made for Hot Type. It’s very much skeuomorphic and sorry, but I’m a total sucker for that! So I tried recreating this little effect on a grid where we show a reflection at the top of the page. It’s really just a small effect, anyway, I hope you enjoy it and maybe it sparks some new ideas 🙂

To do the reflection, we can use a clone that is mirrored using a negative scale value and then scroll that clone at the same time we scroll the page.

To create the shading, we overlay a pseudo element on the body, covering the reflection part:

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(var(--rheight) + 1px);
	pointer-events: none;
	z-index: 2000;
	background-image: linear-gradient(0deg, rgb(0 0 0 / 68%), rgb(15 10 23 / 62%));
	box-shadow: 0px 0px 10vh rgba(0,0,0,0.8);
}

There’s a lot of cool things you can try when scrolling, like animating a filter (see demo 2) and translating in 3D.

This is how it demo 1 look like: