Engineered for the Next Era.
A high-end digital artifact exploring the intersection between brutalist industrial design and liquid glass elegance.
This is not a regular website. It is a precision instrument built as a prototype of what a premium industrial technology company from 2032 could feel like.
AETHER was created with a very specific intention:
- Material Honesty — Every surface, layer, and mechanism is expressed for what it is.
- Layered Transparency — Depth is not simulated. It is built through glass, air, structure and light.
- Silent Precision — Power that doesn’t need to announce itself.
- Human Calibration — Technology optimized for human intention, not speed.
The visual language is a deliberate fusion between:
- Nothing’s geometric, industrial minimalism
- Apple’s Liquid Glass aesthetic (translucency, depth, softness)
Result: A dark, tactile, extremely clean experience that feels more like hardware than software.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router + Static Export) |
| 3D | Three.js + @react-three/fiber + @react-three/drei |
| Animations | Framer Motion (premium, organic easing) |
| Styling | Tailwind CSS 4 + Custom Glassmorphism System |
| Typography | Geist (with wide industrial tracking) |
| Deployment | GitHub Pages + GitHub Actions |
The entire site is statically exported and served directly from GitHub.
https://sekirosevillans-sys.github.io/aether-2032/
The site includes:
- A highly refined central 3D floating precision core (multi-layer glass + internal mechanics + magnetic mouse interaction)
- Multiple glassmorphic sections with consistent industrial language
- Subtle, high-quality micro-interactions
- Hero Section — The central floating 3D precision core with magnetic mouse interaction
- System & Process — Clean glassmorphic cards explaining the philosophy
- Experience — Interactive simulation of different operational modes
- Objects — Showcase of the main physical artifacts
The design remains elegant and usable on smaller screens, maintaining the same level of precision and breathing room.
Screenshots will be added progressively as the project evolves.
- Core visual identity and 3D floating object
- Main sections (System, Process, Showcase, Experience, Objects)
- GitHub Pages deployment with GitHub Actions
- Add more interactive experiences
- Custom domain + HTTPS hardening
- Accessibility audit (WCAG AA)
- Performance optimization pass
- Possible expansion into a design system documentation site
git clone https://github.com/sekirosevillans-sys/aether-2032.git
cd aether-2032/web
npm install
npm run devThen open http://localhost:3000
The project is automatically deployed to GitHub Pages every time there is a push to the master branch.
Workflow file: .github/workflows/deploy-github-pages.yml
To deploy manually:
npm run buildThe static files will be generated in the out/ folder.
web/
├── app/ # Main Next.js application
├── components/
│ ├── sections/ # All major page sections
│ ├── three/ # The central 3D FloatingCore
│ └── ui/ # Reusable glass components
├── .github/workflows/ # GitHub Actions deployment
└── next.config.ts # Static export + GitHub Pages config
Contributions are welcome, especially in the following areas:
- Refining the 3D object (more internal details, better materials, lighting)
- Adding new interactive experiences
- Improving accessibility
- Design system documentation
Please open an issue first to discuss what you'd like to work on.
This project is licensed under the MIT License — see the LICENSE file for details.
- Live Site: https://sekirosevillans-sys.github.io/aether-2032/
- GitHub Repository: https://github.com/sekirosevillans-sys/aether-2032
- Live Deployment Workflow: https://github.com/sekirosevillans-sys/aether-2032/actions
AETHER is an exploration of what high-end industrial digital interfaces could look like in the near future.
Precision is the only luxury left.
Built with intention.