The website meteo.ashwyn.studio It is the official live launchpad for AshMeteo, a highly innovative web application built by creative developer and designer Ashwyn (operating under the handle RaymondWee).
The platform serves as a dedicated, interactive spatial tool that visualizes 30 years of historical climate data for any searchable coordinate on Earth.
Born as an extension of the location-discovery app ashPlace, ashMeteo has captured immense acclaim in the creative engineering community—winning CSS Winner Site of the Day and CSS Design Awards Special Kudos for UI, UX, and Innovation. It serves as a flawless reference blueprint for design curators and front-end developers studying high-performance 3D spatial web design.
Technical & Engineering Architecture
The app’s technical framework is a masterclass in frontend performance, compiling entirely into a single index.html file via vite-plugin-singlefile at a microscopic payload size of just ~168 KB gzipped. Built on a robust tech stack of Three.js, the Open-Meteo Historical API (ERA5), and Nominatim/OpenStreetMap, the platform renders dense historical variables with extreme efficiency:
- The Scene Metrics: When a user inputs a location, the canvas renders a synchronized scene of 1,842 distinct objects—consisting of 720 interactive bars, 1,080 dynamic data-label sprites, and 42 custom axis labels.
- Voxel Geometry Optimization: To achieve flawless frame rates even on decade-old legacy hardware, the app uses minimalist
BoxGeometry(voxel-shaped columns) rather than heavy meshes. - Material & Light Manipulation: Instead of resource-heavy custom ShaderMaterials, the engine applies per-vertex color gradients directly onto a native
MeshStandardMaterial(withvertexColors: true). This preserves natural interactions among physical lighting, metalness, and roughness natively while keeping the code clean.
