ADVANCED INTERACTIVE DESIGN - EXERCISE

 

22/9/2026 - 23/10/2026(Week1-Week5）

ZHANG QIYU/0384019

Advanced Interactive Design/Bachelor of Design in Creative Media/Taylor’s University

Exercise：Component Sandbox & Micro-Interactions

---

Introduction

This exercise focuses on exploring micro-interactions and component-based design using Framer. The main objective is to understand how component variants, interaction triggers, and motion transitions can create more engaging and responsive user experiences.

For this exercise, I developed Audio Nest, a music-themed interactive interface inspired by the experience of discovering and browsing music. The visual direction combines vinyl records, album artwork, dark backgrounds, and elegant typography to create an immersive digital music experience.

The component sandbox explores three different micro-interactions:

• Component 1: Interactive Opening Animation

The opening animation creates an engaging introduction to Audio Nest. As the user moves the mouse, the main image scales up while the letters gradually arrange themselves to reveal the title. This interaction uses movement and visual transformation to capture attention and establish the atmosphere of the website.

• Component 2: Horizontal Scrolling Music Gallery

The music gallery presents a collection of album covers through a scrolling interaction. As the user scrolls through the page, the album artwork moves horizontally across the screen, creating a continuous browsing experience. This interaction focuses on visual movement and the presentation of multiple music collections within a single section.

• Component 3: Deconstructable Flip Card

The deconstructable flip card explores rotation and layered movement. When the interaction is triggered, the card flips while its individual elements separate or move apart, creating a deconstructed visual effect. This interaction demonstrates how spatial transformation can add depth and visual interest to a content component.

Sketch

Figure 1.1 Sketch

Process

Component 1:

Because I'm not familiar with this software, but I want to do it well, so I searched for some tutorials on excellent components on ‘Xiaohongshu’ and followed along to practice.

Figure 2.1 Reference

After establishing the concept, I developed the opening animation in Framer. The main visual and the title typography were arranged within the opening section to create a clear visual hierarchy.

I then worked on the image scaling and letter positioning to establish the relationship between the user's mouse movement and the visual response. The image provides the main focal point, while the animated letters reinforce the movement and reveal the title progressively.

Figure 2.2 Framer Workspace Layout

Figure 2.3 Add photo

Figure 2.4 Properties Panel

The motion design combines image scaling with animated typography to create a coordinated visual response. The image gradually increases in size, while the letters move towards their intended positions to form the title.

Figure 2.5 The process of enlarging the photo

Component 2:

I couldn't find any specific teaching videos, so I searched for the code to create this cover scrolling display, and I also added the covers of my favorite several songs.

Figure 3.1: Xiaohongshu Search Page

Figure 3.2: Code Editing

I added the album cover images to the Framer canvas and arranged them within the gallery section. I adjusted their size, spacing, and alignment to create a clear and consistent layout.

Figure 3.3: Adding Album Covers and Music Titles

I organised the gallery within the page layout so that users could scroll through the album covers. I focused on making the images easy to view and ensuring that the gallery worked naturally as part of the website.

I previewed the website in Framer to check the appearance of the gallery while scrolling. I reviewed the image arrangement, spacing, and overall visual consistency, making adjustments where necessary.

Component 3:

Similarly, this was also made based on the tutorial from Xiaohongshu.

Figure 4.1: Xiaohongshu Tutorial Reference

I designed the animation so that when users scroll down, the original card separates into three individual modules. This deconstruction effect creates a sense of movement and reveals the different parts of the card.

After separating, the card modules flip and transform into different colours, with text appearing on their surfaces. This changes the original image into a colourful, text-based design and makes the interaction more visually engaging.

Figure 4.2: Card Deconstruction Process

After separating, the card modules flip and transform into different colours, with text appearing on their surfaces. This changes the original image into a colourful, text-based design and makes the interaction more visually engaging.

I adjusted the transition settings in Framer, including the spring transition, to make the movement feel smoother. I then reviewed the different card variants on the canvas to check their appearance and consistency.

Figure 4.3: Card Variant and Interaction Settings

The Final Results:https://clever-property-348166.framer.app/

---

Reflection

Observation

During the development of Audio Nest, I observed how interactive elements can make a website more engaging than a static layout. The opening animation, scrolling album gallery, and card deconstruction effect each create a different visual experience. I also noticed that the arrangement of elements, colours, and transitions affects the overall consistency of the website.

Experience

Throughout this exercise, I gained practical experience using Framer to build interactive components. I explored component variants, adjusted visual properties, and experimented with transition settings. Referring to tutorials also helped me understand the process of creating more complex interactions. Some adjustments required repeated testing to achieve the intended visual effect.

Findings

I learned that effective interaction design requires more than attractive visuals. The animation should be smooth, the layout should remain consistent, and the interaction should be easy for users to understand. I also found that breaking a complex animation into smaller steps made it easier to develop and refine. Overall, this exercise improved my understanding of interactive components and gave me more confidence in using Framer for web design.