Astrology
Astrology UX ProtoypeThis is an interactive astrology-oracle prototype built as a browser-native visual instrument. It combines an animated HSL sphere, fine-line orbital geometry, date-based transit markers, and a rotary time wheel into a compact daily reading interface.
The project was built with React and Vite, with the main experience implemented in
src/main.jsx. React manages the selected date, ascendant sign, transit positions, visual mode, and panel state, while SVG geometry and pointer interactions drive the chart surface.The design spec favors a soft atmospheric field, precise white/ink linework, mono utility labels, responsive circular composition, visible focus states, and 44px tap targets. The interface includes orb and solar viewing modes, sign search, date controls, orbit guide toggles, signal and linework sliders, and a tabbed inspector panel.
Core tools include Motion for animated transitions, Radix UI for popovers, tabs, sliders, and tooltips, and lucide-react for UI icons. The animated sphere is rendered with a custom WebGL canvas shader, while the rotary wheel uses native pointer events, pointer capture, keyboard controls, and SVG text paths.
Transit positions are intentionally lightweight and approximate, designed for visual interaction rather than ephemeris-grade astrology. The result is a polished interaction study for an astrology-inspired oracle interface: part generative visual system, part gesture prototype, and part daily reading tool.