My Framer Site

This project explores the relationship between ceramics and digital storytelling. My goal was to recreate emotional and physical interactions with ceramic objects using 3D tools such as Blender, Meshy AI, Spline, and Webflow. The final outcome is an interactive website guided by text, where users journey through various stages of interaction starting from raw falling forms to reassembly and reflection. These stages mirror the lifecycle of ceramics, with each section contributing to a cohesive story of creation, transformation, and digital reinterpretation.

Theoretical Framework

My work is informed by theories of materiality, performativity, and digital culture. I investigated how physical objects gain new meaning when digitized, drawing on articles that discuss storytelling through interaction. I critically examined how user experiences shift based on material representation. This project questions how ceramics once digitized can retain emotional and tactile relevance through interface design and immersive web-based interaction, bringing theory into practice. I also prioritized user engagement to avoid boredom or disconnection in any section.

Why I Chose Ceramics

Ceramics are historically and emotionally significant. Their handcrafted origins and fragility made them a perfect subject for digitization. Everyday objects like kettles, mugs, and vases carry stories and cultural memory. Each design choice from color to form reflects the creator’s intention and care. My aim was to preserve this human touch while translating ceramics into a digital medium, enhancing their meaning through interactive storytelling.

Research Sources & Inspiration

My research was both academic and experiential. I explored websites, academic papers, ceramic shops, and hands-on spaces.
Visiting Ceramics Café Farnham gave insight into the joy of painting ceramics and user interaction.
At UCA Farnham’s glass and ceramic labs, I observed the transformation of raw clay through craftsmanship.
Most scanned objects were sourced from Vinegar Hill Farnham, where the beauty of ceramics deeply inspired me.
These experiences shaped the narrative structure, scene transitions, and interaction flow of the site. I developed user journeys using sketches and visual prototypes.

Idea Development & Experimentation

Initially, I planned a linear gallery but later shifted to a story-driven structure. I envisioned ceramics as active characters in a narrative, with scenes such as falling, discovering, evolving, breaking, and fixing serving as metaphors for transformation and memory. I refined a linear yet interactive progression that reinforces themes of creation, care, and renewal, allowing users to engage emotionally through interaction.

Color, Form & Mood Exploration

I used color and form intentionally to convey mood and material qualities—even in the logo and typography.

Color palettes were tested in Figma and applied in Blender and Spline to simulate textures like matte clay, glossy porcelain, and cracked surfaces.

Lighting, reflections, and bump maps were adjusted to mimic ceramic finishes.
Color changes also serve as interactive features, enhancing user engagement and personalization, deepening their sensory connection.

3D Scanning & Asset Preparation

I captured real ceramic objects using my phone camera and processed them through Meshy AI to generate .glb models. These were imported into Spline or Blender based on the scene's needs.
Textures were created using Spline’s material library, UV mapping, and lighting effects.
This hands-on approach ensured authenticity and personal connection to each digital object.

Blender: Breaking Objects

To simulate broken ceramic objects, I used Blender’s solidify and Boolean modifiers:

Segments were identified and separated based on mesh structure.
Boolean operations created clean cuts and isolated loose parts.
This process was vital for preparing objects for interactive reconstruction in Webflow.

Logo Creation in Spline

The 3D logo “Emetics” was created using Spline’s path tool:

I traced over each letter and extruded the path to give it 3D depth.
A clay texture was applied using bump mapping.
A subtle animation loop was added to enhance brand feel and movement.

Spline Scenes Overview

Scene 1 – Falling Objects with Physics

Simulated ceramic objects fall using physics settings (gravity, collision, friction). A transparent floor catches them, symbolizing fragility and introduction to materiality.

Scene 2 – Ceramic Exploration Page

Four ceramic objects can be clicked to change their textures, colors, and states. Hover events enable rotation and interactivity, fostering user play and discovery.

Scene 3 – Ceramic Evolution

A ceramic cat ornament moves along a timeline using game controls. Hovering over objects reveals period details, blending playful navigation with historical insight.

Scene 4 – Object Reconstruction

Users drag broken pieces to reassemble objects. Sound effects play on correct placement, creating a participatory repair experience that symbolizes restoration.

Scene 5 – Camera Animation with Moving Wall

A wall made from cubes shifts using camera animation. The scene creates an immersive moment, zooming into a ceramic form to reveal a hidden interior.

Scene 6 – Gallery & Conclusion

Users hover over images to reveal their corresponding 3D objects. This closing moment invites reflection, linking physical and digital through a quiet, interactive gallery.

Typography in Spline

I created a custom ceramic-inspired alphabet by tracing the “Baloo Tammudu 2” font in Spline. Each letter was shaped with a clay texture, emphasizing craftsmanship and identity.

Webflow Integration

Spline Integration

Spline scenes were embedded using production embed codes and iframe links. I customized settings by removing the Spline logo and adjusting zoom, lighting, and orbit settings for cleaner UX.

Scroll-Based Animation