**YOGYAKARTA CULTURAL MATRIX - FUI DESIGN SPECIFICATION** ``` <SYSTEM BOOT SEQUENCE INITIATED...> [Decoding cultural data packets: █▒░░▒█ █▒▒█▒░ ▒█▒▒█░] >> ACCESS GRANTED: DAERAH ISTIMEWA YOGYAKARTA NEURAL LINK ``` --- ### **OVERVIEW** A full-immersion holographic dashboard visualizing the living heritage and modern pulse of Yogyakarta. The interface fuses archival data on classical Javanese arts with real-time student activity, economic flows, and ceremonial schedules. All elements are rendered in a 2077‑era HUD with crisp neon lines, dynamic data streams, and interactive wireframes. --- ### **VISUAL STYLE** - **Palette:** - Primary: `#00F0FF` (Cyan for heritage streams) - Secondary: `#FF003F` (Magenta for university data) - Tertiary: `#FFC800` (Amber for alerts/events) - Background: `#050505` (deep void black) - **Fonts:** JetBrains Mono, monospaced, 12‑pt for labels; larger sizes for headers with `letter-spacing: 0.5px`. - **Lines:** 1‑pixel hairline borders (`#1A1A1A`) with corner brackets `╔ ╗ ╚ ╝`. All decorative lines have a slow breathing glow (0.5 s cycle). - **Effects:** - Text decoding: each label appears from random glyphs (`!@#$%`) to final characters. - Neon bloom: 4‑px Gaussian glow on all active elements. - Scanlines: faint horizontal lines at 2‑px intervals, opacity 0.1. - Holographic aberration: RGB shift on hover (0.8 px offset). --- ### **LAYOUT GRID** ``` ╔══════════════════════════════════════════════════════════════╗ ║ YOGYAKARTA CULTURAL MATRIX — v2.077 ║ ╠───────────────────────┬──────────────────────────────────────┤ ║ │ ║ ║ HISTORICAL CORE │ MODERN DYNAMICS ║ ║ │ ║ ║ (Left Panel) │ (Right Panel) ║ ║ │ ║ ╠───────────────────────┼──────────────────────────────────────┤ ║ │ ║ ║ LIVE FEED FOOTER │ ║ ║ (Spanning both cols) │ ║ ║ │ ║ ╚═══════════════════════════╧══════════════════════════════════╝ ``` --- ### **PANEL CONTENT** #### **1. HISTORICAL CORE (Left)** - **Title:** `KERATON SPECTRAL ANALYZER` Rendered with a rotating wireframe model of the palace (low‑poly, ~500 faces). The mesh pulses cyan when a ceremony is active. - **Audio Waveform:** Real‑time FFT of gamelan recordings from the palace courtyard. Axis labels in mono: `FREQ (Hz)`, `AMPLITUDE`. The line is drawn with `#00F0FF` and has a trailing after‑glow. - **Wayang Kuliti Index:** Numeric value at bottom‑left: `PUPPETRY Vitality: 98.7%`. A small bar chart shows monthly performance counts. - **Batik Pattern Generator:** A mosaic of 8×8 blocks that randomly assembles traditional motifs. Each block updates via Perlin noise; hover reveals pattern name and origin region. - **Silat Motion Tree:** A branching diagram of martial arts forms (jurus). Nodes glow amber when a live demonstration is detected near the Kraton (via IoT sensors). #### **2. MODERN DYNAMICS (Right)** - **Title:** `UNIVERSITIES NETWORK TOPOLOGY` A force‑directed graph of Gadjah Mada University, ISI Yogyakarta, and other institutions. Nodes represent faculties; edges show student exchange flows. - **Student Activity Heatmap:** Overlaid on a stylized map of the city (Malioboro, Kotagede, etc.). Colors: `#FF003F` (high density), `#5A005A` (medium), `#0A0A0A` (low). Updated every 15 min from campus Wi‑Fi pings. - **Research Output Stream:** Scrolling ticker of publication titles in English and Javanese. Each item decodes character‑by‑character then fades out after 5 s. - **Café & Co‑working Hub Status:** Live occupancy percentages for 20 popular spots (e.g., `TTOP: 78%`, `KedaiSeni: 92%`). Bars fill with magenta. #### **3. LIVE FEED FOOTER (Spanning Both Columns)** - **Malioboro Sensor Grid:** `Foot Traffic: ████████░░ 82%` (bar with 0.2 s smooth fill). `Street Art Vibes: HIGH` with a flickering graffiti icon. `Batik Sales: 4.2M units/day` numeric counter with comma separators. - **Event Countdown:** `Next Royal Ceremony: 02:14:33` (hh:mm:ss) in amber, blinking on the last second. - **Data Decay Indicator:** A small horizontal line that slowly erodes from both ends, symbolizing the fleeting nature of live data; regenerates every 60 s. --- ### **INTERACTIVE BEHAVIOR** - **Hover State:** - Over a node in the university graph: expands to show faculty name, student count, and trending research keywords. - Over the Keraton wireframe: displays next ritual time and participating royal family members. - **Click Action:** Opens a deep‑archive window with full‑resolution videos of wayang performances, gamelan scores, or batik design libraries. - **Voice Command (simulated):** `"Show me the pulse of Yogyakarta."` Triggers a global view with all panels synchronizing to a heartbeat rhythm (1 Hz). --- ### **AMBIENT ANIMATION** - **Breathing Lines:** All border segments and grid back‑bones have a subtle opacity oscillation (0.15 → 0.35) to mimic living circuitry. - **Data Dust:** Tiny particles (pixel size) drift upward in the background, occasionally clustering to form the silhouette of a gamelan instrument or a wayang character. - **Glitch Events:** Randomly (every 4‑6 min) the entire screen splits horizontally for 0.1 s, displacing colors, then snaps back—simulating digital interference from the Sultanate’s ceremonial energy. --- ### **TECHNICAL SPEC** - **Rendering:** WebGL with custom shaders for wireframe extrusion and chromatic aberration. - **Data Sources:** Integrated APIs from Yogyakarta Tourism Board, university IoT networks, and the Keraton’s event calendar (converted to JSON‑LD). - **Accessibility:** High‑contrast mode available (`#FFFFFF` on `#000000`) for users with sensory sensitivities; all audio visualizations include subtitles. --- **<END OF DESIGN PACKAGE>** `Ready to deploy the cultural overlay?`