Moment / Portal

What the Project Is: Moment / Portal is a motion-graphic and web-based exploration of deceleration, presence, and alternative temporal experience. It blends digital aesthetics with ecological and philosophical frameworks, forming a contemplative interface that resists extraction-based attention design.

Conceptual Foundation:

The project is grounded in:

• Jenny Odell's Saving Time, which critiques the capitalist structuring of time and proposes reclaimed temporal awareness rooted in ecology.
• Byung-Chul Han's The Scent of Time, emphasizing the loss of contemplation under modern acceleration.
• Martin Buber's I and Thou, inspiring a relational mode of being and encounter that shaped the portals' approach to user interaction.

Audience & Practice Demonstration:

Moment / Portal is designed for members of the public seeking alternatives to extractive digital spaces. It demonstrates my ability to:

• Build interactive digital experiences that foreground ecology, presence, and reflection
• Integrate motion graphics and generative systems into web environments
• Bridge philosophy, media studies, and creative technology

Approach Taken:

Each portal was approached as a temporal micro-world. Rather than delivering information, the experience invites users into modes of sensing and witnessing. The design prioritizes slow animation loops, ethereal gradients, organic shapes, and minimal interface elements to encourage reflection and presence.

Initial Research, Inspirations & Readings

Theoretical Grounding:

• Saving Time (Jenny Odell)
• The Scent of Time (Byung-Chul Han)
• I and Thou (Martin Buber)

Central Themes:

• Relationality in digital interaction
• Counter-design against extractive digital attention economies
• Digital spaces as contemplative environments

Inspirational Media & Creative Influences

• Generative motion-graphics communities
• Ambient computing aesthetics and soft spatial interfaces
• Ecologically informed design principles

Goals & Constraints

Goals:

• Create contemplative digital interactions
• Explore ecological and philosophical notions of time
• Integrate motion graphics into a cohesive web experience
• Showcase generative design as a vehicle for temporal reflection

Constraints:

• Designing slow, ambient loops without losing visual interest
• Integrating TouchDesigner outputs seamlessly into a web interface

Wireframes, Sitemaps & Storyboards

• Designed a minimal sitemap
• Mapped user flow through four experiential "rooms"
• Storyboarded motion behavior for each portal
• Developed layout plans balancing negative space, motion graphics, and interactions

Style Guide, Typography & Color Systems

• Visual Language: Soft gradients, organic geometry, diffused light
• Color Palette: Ethereal pastels, atmospheric blues/pinks, deep shadows
• Typography: A clean, modern serif supporting calm, unobtrusive reading

Accessibility Decisions

• Reduced visual noise: minimal text, focused composition
• Clean tab order, semantic HTML structure
• High-contrast navigation elements
• Descriptive alt text for motion graphics

Technical Planning & Architecture

• Motion Graphics: Built generative scenes in TouchDesigner
• Interaction Logic: Lightweight JavaScript for portal transitions
• Augment Portal: Integrated a grid of livestream feeds using JS-based video embedding

Code Implementation

• Implemented semantic HTML structure
• Built responsive, minimal layouts highlighting each portal
• Integrated exported motion assets into a unified interactive framework
• Developed portal transition logic and hover-trigger behaviors

Animation, Graphics & Motion Exploration

Designed and refined four portals:

• Augment: Live video grid
• Nurture: Soft gradients and geometric growth
• Release: Dissolving forms and decaying patterns
• Particle: Generative particle motion

Components Built & Media Created

• Motion graphics across all pages
• Web components supporting motion and temporal navigation
• UI elements optimized for contemplative interaction
• Process documentation

User Testing & Feedback

• Conducted feedback survey with participants interested in digital minimalism and contemplative technology
• Evaluated pacing, visual clarity, sense of presence, and emotional resonance
• Refined portal motion speeds

Code Refactoring

• Improved video embedding performance
• Optimized loading times for motion assets
• Refined JavaScript for smoother transitions

Adjustments for Clarity, Storytelling & Accessibility

• Simplified text content to avoid cognitive overload
• Improved motion pacing to encourage slower engagement
• Added accessible descriptions and metadata

Final Deliverable Details

• Format: Interactive webpage
• Motion Graphics: Four custom generative environments
• Responsive: Optimized for desktop
• Accessibility: Designed for readable, slowed-down engagement

Features Completed

• Four motion-driven experiential portals
• HTML/CSS/JS web platform integrating TouchDesigner outputs using JS-based video embedding
• Minimalist interface design
• Slow loops and organic visual systems

Product Delivered

A fully realized interactive motion-graphic experience that reframes digital time as relational, ecological, and contemplative. Moment / Portal functions as both digital artwork and alternative interface, challenging traditional expectations of web interaction.

What I Learned

• New motion-graphic pipelines and generative design workflow
• Techniques for integrating TouchDesigner content into web environments
• How to create interactive experiences that prioritize slowness and reflection

Challenges & Breakthroughs

Challenges:

• Integrating complex motion assets with lightweight web code
• Designing pacing slow enough to feel contemplative but engaging
• Managing performance for graphic loops

Breakthroughs:

• Successful implementation of a live video-grid concept
• Achieved cohesive visual language across four distinct spaces

How the Project Shaped My Design Philosophy

Moment / Portal deepened my commitment to:

• Ecological thinking in digital design
• 'Temporal justice'
• Interface minimalism
• Contemplative, relational digital experiences
• Designing with attention

Future Plans

Features to Add or Extend:

• Fully functional livestream grid pulling in real-time global video feeds
• More advanced interaction models (e.g., portal "breathing" states)
• Audio-reactive or sensor-based motion versions of each portal

Technical Improvements:

• Introduce TypeScript, React, or a Python-based backend
• Explore WebGL-driven versions of the portals
• Add dark mode, accessibility toggles, and real-time rendering options

Moment / Portal is a conceptual and technical exploration of alternative digital temporalities. Through motion graphics, generative systems, and interactive web design, the project challenges extractive media paradigms and reimagines the web as a calm, reflective, relational space. It demonstrates my capabilities as a creative technologist and digital worldbuilder — blending philosophy, ecological thinking, and computational design into a cohesive, experiential digital artwork.