Modifying Geometric Floating Shapes

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• aether-style.css
• aether-script.js
• README.md
• assets/aether-shapes/shape-1.svg (Referenced via directory structure)

The geometric floating shapes system provides the core visual identity of the Aether portfolio. It consists of background-layer elements and interactive hero-section geometry that utilize CSS animations and JavaScript-driven interactions to create a premium, "supreme minimalist" aesthetic.

These shapes are primarily located in the background and the hero section, serving to reinforce the "Android Architect" theme through precise, mathematically-driven visual components.

Sources: index.html:1-10, aether-style.css:1-10, README.md:1-15

Background Floating System

The background utilizes a dedicated container for atmospheric floating shapes. These elements are non-interactive (pointer-events: none) and are positioned fixed relative to the viewport.

Implementation Architecture

The system uses a combination of HTML class definitions and CSS Custom Properties (Variables) to define animation timing.

The diagram shows the hierarchy of the background shapes and how inline variables drive the animation engine.
Sources: index.html:26-31, aether-style.css:75-103

Configuration Parameters

Parameter	Type	Default	Description
--delay	Time (s)	0s to 15s	Controls when the animation cycle begins for a specific shape.
--duration	Time (s)	20s to 28s	Determines the speed of the floating and rotation cycle.
background	CSS Radial Gradient	gold/transparent	Uses a radial gradient to create a soft glow effect.

Sources: index.html:27-30, aether-style.css:83-85

Hero Section Geometry

The Hero section features a more complex "orbit" system that represents technical precision. Unlike the background shapes, these are grouped within a geo-container.

Components of the Hero Geometry

1. geo-main: The central pulsing core using geoPulse.
2. geo-orbit: Circular paths (orbit-1, orbit-2) that rotate around the center.
3. geo-accent: A small gold circle that floats vertically within the orbit structure.

This graph illustrates the layered components within the hero section's central visual asset.
Sources: index.html:61-66, aether-style.css:235-294

Animation Mechanics

The project uses three distinct @keyframes sets to manage the motion of geometric shapes:

Floating Animation (float)

Used by background shapes. It creates a seamless loop of vertical movement and full 360-degree rotation.

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
  100% { transform: translateY(0px) rotate(360deg); }
}

Sources: aether-style.css:99-103

Orbit Animation (orbitRotate)

Applied to the .geo-orbit classes. It provides continuous circular rotation. The orbit-1 variant uses animation-direction: reverse to create a counter-rotational effect against orbit-2.
Sources: aether-style.css:276-285

Interactive Tilt Effects

Specific geometric containers (like work items) implement a JavaScript-driven 3D tilt effect. This is handled by the AetherPortfolio class in aether-script.js.

The sequence shows how the script calculates geometric transformations based on user cursor position.
Sources: aether-script.js:58-75

Modification Guide

To modify the shapes, developers should target these specific areas:

• Custom Shapes: The project structure indicates pre-defined SVG shapes in assets/aether-shapes/. New shapes can be added by replacing the background property of the .shape class in aether-style.css.
• Animation Speed: Adjust the --duration property in the index.html inline styles for background shapes, or the animation-duration in .geo-orbit classes for hero elements.
• Geometric Colors: Global colors are controlled by :root variables, specifically --gold and --navy.

Sources: README.md:12-15, aether-style.css:3-6, index.html:27-30

The geometric floating shapes are a critical part of the Aether engine, combining CSS Keyframes for ambient movement and JavaScript event listeners for interactive depth. By modifying the CSS Custom Properties and keyframe definitions, the entire visual atmosphere of the portfolio can be adjusted while maintaining the core "architectural" logic.