For inspiration, here’s some of the latest examples of what you can do with the latest motion and 3D libraries:

• Dropbox’s playful brand hub
• Blobmixer’s interactive sculptures
• Sentinel AI’s evolving DNA strand animations
• Igloo Inc.’s particle-driven storytelling
• Anime.js new home page

In this lesson, you’ll learn how to start adding basic 3D and excellent animation to your designs. Whether you’re comfortable diving into the code yourself or leveraging AI to generate implementations, these powerful tools are now accessible to designers at all technical levels. The resources below provide step-by-step tutorials for the most effective libraries, allowing you to experiment with depth and motion without specialized expertise.

1. Three.js - Creating a Scene

   This introduction to browser-based 3D shows you how to build a spinning cube in under 20 lines. Identify the three core objects (scene, camera, renderer) that form the foundation of every Three.js project. Three.js makes custom WebGL accessible when you need precise control over 3D elements.

2. GSAP - Getting Started

   GSAP is a professional-grade animation library obsessed with performance, consistently delivering silky-smooth 60 FPS animations even on low-powered devices. Explore powerful features like ScrollTrigger that synchronizes complex animations with scroll position, or the timeline functionality that precisely sequences multiple animations. GSAP’s performance-first approach ensures your animations remain buttery smooth while clarifying relationships and guiding user attention throughout your interface.

3. Rive - Visual State Machines

   Rive is a no-code tool that lets designers connect hover, click, or drag triggers to vector animations without writing JavaScript. Export a Rive animation and compare its file size to an equivalent GIF to see the efficiency benefits. Rive enables you to create production-ready interactions visually.

4. Spline - Code & Viewer Export

   Spline is a browser-based 3D tool that exports complete interactive scenes as a single component. Try making a simple scene and enabling “Orbit” on scroll to see how easily you can integrate 3D experiences. Spline makes scroll-reactive 3D accessible without requiring any WebGL expertise.

5. Adobe Mixamo - Character Animation

   Mixamo is a free service that automates 3D character rigging and animation. Upload a model and instantly apply professional motion-captured animations, making it easy to add lifelike characters to Three.js or Spline projects without specialized skills.

Great animations feel more natural

Linear animations are rarely used, they feel robotic and unnatural as almost nothing in the in the world around us moves at a constant speed. Using spring animations, or an easing type that resembles something in the real world can make an animation feel familiar and less artificial.

Great animations are fast

User’s want instant feedback on their actions. When they click on a button, a modal should appear in 200ms or less, preferrably with an ease-out curve to make it seem even faster while maintaining decent motion.

Speed of our animations can also alter the perceived performance of your app. Which loading spinner below will load the app faster? I’d say the one on the right, it moves fast and tells me that it’s working very hard to load the data for me.

Great animations have a purpose

It’s easy to start adding animations everywhere. The user then becomes overwhelmed and animations lose their impact. We need to pace them through the experience and add them in places where they enrich the information on the page.

A good example is this animation I made for Vercel. It explains how v0 works. While this animation is arguably entertaining to watch, it’s also insightful.

We can also use it to indicate a change in state like in this app store cards example.

When you think about adding an animation, you should consider how often the user will see it. I use Raycast’s command menu a lot, it would be annoying and tiring to see the same animation hundreds of times a day.

Great animations are hard

This should give you a good starting point for creating great animations. But if you’d want to learn more, here are some additional resources:

1. Motion & Platfulness

   Great presentation by Benjamin De Cock about motion.

2. Designing Fluid Interfaces

   A must watch presentation by Apple.

3. Family Values

   A post on how the Family app was built. Contains lots of animation details.

4. Developing Taste

   On what taste is and why it matters.

5. Animations on the Web

   My course that teaches you how to build animations on the web.

Super normal design values the unchanging. It respects the kinds of forms that evolve not from brainstorming sessions or moodboards, but from decades of use. Morrison and Fukasawa didn’t claim to create these objects—they curated them. And their shared thesis was quiet but radical: good design doesn’t scream. It harmonizes with human behavior so naturally it becomes invisible. In an industry obsessed with differentiation, super normal is a call to humility. To restraint. To studying the objects and interfaces that already work astonishingly well—and understanding why.

1. Super Normal UX Design

   In this insightful article on “Super Normal UX Design,” Thomas Schinabeck explores how true simplicity in design isn’t about minimalism but about creating experiences that feel familiar yet superior—designs that harmonize with users’ natural workflows and mental models. Using the example of the Mailbox app, he demonstrates how “super normal” digital products maintain comfortable familiarity while subtly enhancing functionality, creating interfaces that feel timeless and intuitive because they’re built on deep understanding of user behavior and context.

2. Why Some Designs Are Impossible to Improve: Quintessence

   Certain designs achieve “quintessential” status not just through quality, but through scale, simplified manufacturing processes, legal protections, and their ability to become culturally indispensable. The most enduring designs, from paperclips to smartphones, tap into an emotional resonance beyond mere functionality—an almost magical “fifth element” that transforms ordinary objects into classics we can’t imagine living without.

3. Jasper Morrison on Designing from Personal Experience

   Jasper Morrison walks through decades of his own work to make a simple argument: the best objects are often the least noticeable. He highlights how anonymous, utilitarian designs—those that exist to serve, not to seduce—offer the most lasting value. Rather than chasing novelty, Morrison urges designers to question their motives and find true functional beauty.

4. The Definition of Good Design by Naoto Fukasawa

   In this interview with Naoto, he discusses his design philosophy, emphasizing observation of human behavior and creating products that harmonize with natural interactions rather than drawing attention to themselves. Fukasawa explains that good design is about creating harmony between people and objects—designs that become so intuitive that people unconsciously choose them over other options, which represents the true definition of good design.

5. Super Normal: Sensations of the Ordinary

   Browse through images from the original Super Normal exhibition curated by Fukasawa and Morrison. Study the everyday objects that exemplify their philosophy—items that don’t announce their design credentials but simply do their jobs exceptionally well.

In a world obsessed with novelty and disruption, supernormal design asks us to slow down and appreciate what already works. It challenges us to design not for immediate impact, but for enduring usefulness—to create things that might never be consciously noticed but would be deeply missed if they disappeared.

This lesson explores how designers are shifting from breakneck velocity to sustainable growth while maintaining the spirit of rapid iteration. You’ll learn to design systems, products, and experiences that prioritize resilience without sacrificing user needs.

1. Mark Zuckerberg’s Original Letter to Investors

   Before deconstructing the “move fast” mindset, it’s worth examining the source. In this 2012 IPO letter, Zuckerberg outlines Facebook’s “hacker way” philosophy that shaped Silicon Valley’s approach to product development.

   Identify one value from the letter that still resonates with your design practice and one that feels outdated in today’s landscape.

2. Why “Move Fast and Break Things” Is Outdated Advice

   Jam.dev CEO Dani Grant explains why this decade-old advice has evolved and how slowing down to fix things can actually be the key to finding product-market fit.

   Identify one area in your current design process where intentionally slowing down could improve quality or user experience.

3. Leaders Can Move Fast and Fix Things

   This HBR piece draws from global digital infrastructure examples to demonstrate how speed and responsibility can coexist when systems are designed with public value, adaptability, and long-term trust.

   Sketch a simple change to your current product that would signal greater care, reliability, or clarity to your users.

4. Google PAIR: The People + AI Guidebook

   As AI products evolve rapidly, this practical guidebook from Google’s People + AI Research team offers thoughtful approaches to designing human-centered AI systems, covering data transparency, mental models, and building trust.

   Review one section relevant to your work and note a principle to implement in your next product sprint.

5. The Slow Media Manifesto

   For a philosophical perspective, this manifesto responds to fast, disposable content by advocating for more thoughtful, intentional approaches to digital creation.

   Choose one principle that resonates with you and consider how to incorporate it into your next design feature.

In this lesson, we’ll look at some practical AI tools that can enhance specific parts of your design workflow. No dramatic changes or radical rethinking required—just straightforward ways to save time on tedious tasks and get a little extra help with ideation. We’ll focus on how these tools can complement what you already do well, helping you work a bit faster and explore a few new possibilities along the way.

1. Andrej Karpathy: How I Use LLMs

   Andrej explains the best mental model behind how language models work. Understanding this helps you grasp what AI tools can actually do, their limitations, and how to use them effectively.

   Watch the video to understand how these models work, their capabilities, when to use them, and how to best structure prompts.

2. Bolt.new: From Figma to Code

   This brand new feature converts Figma designs to code. It’s the perfect place to start for a developer handoff.

   Try converting an existing Figma design using Bolt. Where does the tool get it right or wrong?

3. V0: Prototyping from Prompts

   V0 lets you create production-ready code, through prompts. I’ve found it to be incredibly helpful in making interaction-heavy prototypes that would have taken hours in traditional software.

   Use V0 to mock up an interaction heavy design component like a menu system.

4. Claude: Copywriting Assistant

   Claude’s Project feature lets you add files to the context window like style guides, examples, and glossaries to keep your writing consistent across your product.

   Create a Claude Project with your brand guidelines and generate copy for a new marketing page.

5. Perplexity: Real-Time Design Research

   Perplexity helps you quickly research competitors, trends, and user behavior with up-to-date information. I’m a bit biased as one of the designers at Perplexity but I still use it as a starting point for almost every project.

   Generate a competitive analysis, summarize app store reviews, or get a trend report related to your project.

1. Step 1: Define what makes you unique

   Before you work on designs, you must first define what makes you a totally unique person. Write a list of three core personality traits, or qualities, that make you amazing and interesting. You’ll translate those into mood boards later, so do your best to choose qualities that can be represented visually. For an in-depth version of this exercise, check out my workbook and video series Full Time You! Meg’s example: I love change, I don’t take anything too seriously, I love supporting others.

2. Step 2: Create a life’s purpose

   A life’s purpose is a crucial thing to have. It should be something short that’s made just for you. Because of your unique personalities, skills, and qualities, your life’s purpose should be easy to fulfill daily by you. Your purpose should drive every career and life’s decision that you make. You should be using your life’s purpose to position your design work and style. Meg’s example: My life’s purpose is to make the world a happier place.

3. Step 3: Visualize your findings

   Make a separate mood board for each of your three personality traits or qualities. You’ll likely have to do some critical thinking to maneuver your traits into visuals. Your mood boards should include photography, design, illustration, colors, and whatever else you need to accurately represent your unique qualities. Once your mood boards are finished, take a step back and notice common visual cues that are associated with each. You’ll see that each of the mood boards are vastly different because you’re made of traits that are totally different from one another. Our goal is to combine the mood boards into one super “you” board that will be different from anyone else’s and unlike anything that exists in the world.

4. Step 4: Create your new design style

   Here comes the hard part! Create a new mood board with work entirely made by you. This super “you” board should take elements you notice from each of your individual boards and combine them to create a brand new design style that’s a reflection of the unique person you are. Say one of your boards is full of bright colors and geometric shapes, another has art deco intricate illustrations, and the third has a lot of humor. You’ll create a new style that mixes geometric boldness with intricate line work but has a hilarity to it. Catch my drift? Make sure your new design style is also fulfilling your life’s purpose and utilizing your unique set of skills. If your life’s purpose is to promote bod positivity, you can fulfill that in each piece you make! If you’re skilled at photorealistic portraits, use that! If you’re great at hilarious copy in your work, go for it! Those things are what make you amazing. In the end you’ll create a design style unlike anyone else, because you’re unlike anyone else. Your unique design skillset, life’s purpose, and qualities makes for a style unlike anyone else’s.

1. Tutorial: Open Cinema 4D Lite in After Effects (2 min)

   Okay, so if Cinema 4D Lite is free with After Effects CC… why does it feel like some huge secret? Well, it’s kind of stuffed between the couch cushions of the app! I’ve met people who have been using After Effects for over TEN YEARS and never knew. This tutorial will show you how to find it and create your very first scene.

2. How to get Cinema 4D Lite for free

   Why don’t more designers know about this?! Cinema 4D is the industry standard for 3D design and motion graphics. You’ve seen it in Black Panther, Stranger Things, and Game of Thrones! And here’s the crazy thing: CINEMA 👏 4D 👏 IS 👏 FREE 👏 WITH 👏 AFTER 👏 EFFECTS. If you have an Adobe Creative Cloud subscription, you already own it.

3. Tutorial: Go with the Flow (15 min)

   In this tutorial, we’ll create a wavy plane animation while getting to know the interface. You’ll learn how to transform 3D objects, navigate 3D space, and animate a beautiful wind effect. This tutorial is designed for Cinema 4D first-timers, so dive right in!

4. Tutorial: Every Step of the Way (10 min)

   It’s all about color and lighting in this beginner-friendly tutorial! You’ll learn how to instantly repeat 3D objects, control light and shadow, and dial in those colors for the perfect palette.

5. Intro to Cinema 4D for Designers

   Get ready for the design challenges of the future! In this comprehensive 3D fundamentals course, you’ll learn how to create beautiful shape, form, lighting, color, and animation in 3D.

1. Talking about Augmented Reality

   This article will teach you about the different types of content you will encounter as well as how to properly define an interaction in AR. The language we use to describe something is extremely important since it is so closely tied to our understanding. If we are unable to clearly articulate our intentions, there is a good chance we might not be clear on what we are hoping to achieve. By being able to properly articulate the intentions of the design, it becomes easier to implement in development, as well as get alignment from stakeholders.

2. Basic Interfaces and Design Patterns

   This article is a collection of basic interface patterns and behaviors that have started to emerge in the market. Some of these patterns include alerts, indicators, as well as guides. This article explores the different interactions that are possible with content in AR and also what to be conscious of in this evolving medium.

3. Color and Text in AR

   AR is essentially layering data over a live camera feed. This means that the designer has no control over what the camera shows. There is no guarantee if the background will be light or dark and so it is important to make sure the designs work in as many scenarios as possible. This article covers existing patterns and suggestions for how to effectively design on an ever-changing background.

4. Hardware and Software for Mobile AR

   Hardware and software specs are easy to overlook when focusing on the design and experience. However, when working in new and emerging tech, general comprehension of how things work can help inspire and even bring innovation to this space.

1. Picking pilot projects

   Once you’ve started building and designing your system, it’s important to test all the parts before shipping your first release. Pilots are a good way to test if you’ve met the goals of your design system, such as making it easier for developers to implement designs, and providing a unified design language. Using a set of criteria to determine a project’s potential will help you find great pilot candidates.

2. Everything is a component

   Thinking in components helps you to see every part of the UI as an interoperable system. Design systems should be highly composable, providing many small reusable components that can be mixed and matched and used together to create new components.

3. Designing your design system

   It can be daunting to know where to begin with designing your design system, and who you should collaborate with to design it. Typography, spacing, and color each have their own rules and constraints, and every piece should be designed to work in harmony with other parts of the system. Breaking the work down into small manageable chunks will help you find the right model and add the right pieces and be on your way to creating a successful design system.

4. When and how much?

   It takes time and resources to build and maintain design systems. When your team is small, investing in design systems might seem like a luxury you can’t afford. Many companies don’t dedicate full time resources until they start feeling the pains of not having one. When you do start working on design systems, it can be difficult to figure out what to prioritize and how to time to spend on them.

5. What are design systems, really?

   You may have heard of terms such as style guides, pattern libraries, design languages, and components. There are tons of terms and definitions being thrown around which makes it difficult for everyone to come to the same understanding about what design systems are, and what problems they solve. Understanding what they are, or should be in the context of your company is important to establish early on.

1. The Case for Talking to Users in the Age of Big Data

   I really like the way the author breaks down the unique benefits of qualitative research. It’s a good primer for why this kind of research is worthwhile and why you should invest in reading the rest of these links.

2. UX Research Cheat Sheet

   This short article from the Nielsen Norman Group provides a high level view of many valuable research methods, as well as some best practices. I suggest you start with usability testing, user interviews, and field studies.

3. Techniques for Talking to Users

   A few handy tips for interviewing users without skewing their answers.

4. Book: Rocket Surgery Made Easy

   This book outlines everything you need to know to get started with usability testing. It’ll take you less than a day to read and you’ll be able to apply what you learn right away. Once you get started testing your product, you’ll be surprised by how straightforward it is.

5. How to Lead an Impactful Research Team

   It’s one thing to conduct a few ad-hoc interviews with users. It’s quite another to build research into your product development process. I’d like to end with this brilliant article explaining how to do just that. It was written with a dedicated research team in mind, but I think it applies to anyone trying to get their companies to buy into the importance of regular research.