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:

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

Inspirational Media & Creative Influences

• Generative motion-graphics communities exploring slow, organic simulation
• 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
• Balancing interactivity with conceptual reflection
• Ensuring smooth performance across browsers

Wireframes, Sitemaps & Storyboards

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

Style Guide, Typography & Color Systems

• Visual Language: Soft gradients, organic geometry, diffused light
• Color Palette: Ethereal pastels, atmospheric blues/pinks, temporal shadows
• Typography: A clean, modern sans-serif supporting calm, unobtrusive reading
• Motion Identity: Slow loops, oscillations, subtle breathing rhythms

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
• Web Integration: Exported videos / WebGL-style assets for HTML/CSS/JS embedding
• Interaction Logic: Lightweight JavaScript for portal transitions
• Environmental Layout: Minimal DOM structure to foreground motion
• 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

Interaction Logic

• Users navigate through portals via subtle cues, not heavy UI
• Interactive video grid in Augment invites open-ended exploration
• Each portal's entry and exit encourages a slow, deliberate pace

Animation, Graphics & Motion Exploration

Designed and refined four temporal states:

• Augment: Live video grid, multi-perspective temporal augmentation
• Nurture: Soft gradients and gentle geometric growth
• Release: Dissolving forms and decaying temporal patterns
• Particle: Generative particle motion shaped by subtle forces

Components Built & Media Created

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

User Testing & Feedback

• Conducted feedback sessions with viewers interested in digital minimalism and contemplative tech
• Evaluated pacing, visual clarity, sense of presence, and emotional resonance
• Refined portal motion speeds and easing curves

Code Refactoring

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

Visual Polish

• Harmonized color transitions across portals
• Softened gradients and easing curves to reduce perceptual "jumps"
• Balanced composition across screen sizes

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
• Experience Architecture: Portal-based interaction
• Responsive: Optimized for desktop and high-resolution displays
• Accessibility: Designed for calm, readable, slowed-down engagement

Features Completed

• Live video-grid experiment (Augment)
• Four motion-driven experiential portals
• HTML/CSS/JS web platform integrating TouchDesigner outputs
• Minimalist, contemplative interface design
• Slow temporal 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 temporal interface, challenging traditional expectations of web interaction.

What I Learned

• New motion-graphic pipelines and generative design workflows
• 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 high-resolution graphic loops

Breakthroughs:

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

How the Project Shaped My Design Philosophy

Moment / Portal deepened my commitment to:

• Ecological thinking in digital design
• Temporal justice and slowness
• Interface minimalism
• Contemplative, relational digital experience
• Designing with attention, not for attention extraction

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.