For Animation Guy I wanted everything to look and feel like sheets of paper.

I stumbled upon PaperCSS, which is an entire framework for… paper.

Paper CSS

This is also where I found out the “magical” value for this unique paper-like border radius for all buttons and elements:

.paper-like {
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px
}

And paper-like buttons.

Button that says contact

I also asked Guy to create “old school” animated GIFs, and he delivered.

Animated GIF of an old film camera

I also made the underlines react to hover, and added Lottie social icons.

By the way, if you need someone to create cool animations, he’s your guy. Pun not intended, but unavoidable.

I made a video about how Relume AI saved dozens of hours creating this site, so check it out.

Web Design Secrets, Part 8: Figma Playground
Web Design Secrets, Part 7: Huge Graphics
Web Design Secrets, Part 6: Gradient Headings
Web Design Secrets, Part 5: Bento girds
Web Design Secrets, Part 4: Mouse Follower
Web Design Secrets, Part 3: Secondary Animation
Web Design Secrets, Part 2: Staggered Text Reveal Animation
Web Design Secrets, Part 1: Smooth Scrolling
How to add "Paper" to your web design
Relume AI Website Builder
No more unbalanced headlines in your design
Fill text on scroll with GSAP and ScrollTrigger
Design Better Countdown Timers
Emoji Confetti
Text Stroke Effect
Stretched letter effect using variable fonts

Got a Question?

Get an Answer!

If something's not clear, drop a question on my Instagram and I'll update my tutorial if needed.

More videos

Next
No next video
Back to all videos
Previous
No previous video
Back to all videos

Some of the links on this page are affiliate links, meaning I may receive a commission if you follow them. This allows me to continue providing free content and educational resources for you, and for you it changes nothing. Also, I 100% stand behind every product I recommend. Thank you for supporting my small business