1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6 <meta name="description" content="NEO MIRAI AI Design Conference, Tokyo 2042. A retro-futurist conference experience for illustration, interfaces, machines, and optimism.">
7 <title>NEO MIRAI AI Design Conference</title>
8 <link rel="icon" href="../favicon.svg" type="image/svg+xml">
9 <link rel="preconnect" href="https://fonts.googleapis.com">
10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11 <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600;700&family=Chakra+Petch:wght@300;400;500;600&family=Zen+Old+Mincho:wght@400;500;600&display=swap" rel="stylesheet">
12 <link rel="stylesheet" href="./styles.css">
13 </head>
14 <body>
15 <a class="skip-link" href="#main">Skip to content</a>
16
17 <header class="site-header" data-reveal>
18 <a class="brand-lockup" href="#" aria-label="NEO MIRAI home">
19 <span class="brand-mark" aria-hidden="true">
20 <span></span>
21 </span>
22 <span class="brand-word">
23 <span>NEO</span>
24 <span>MIRAI</span>
25 </span>
26 </a>
27
28 <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">
29 <span>Menu</span>
30 <i aria-hidden="true"></i>
31 </button>
32
33 <nav class="site-nav" id="site-nav" aria-label="Primary navigation">
34 <a href="#home" aria-current="page">Home</a>
35 <a href="#agenda">Agenda</a>
36 <a href="#speakers">Speakers</a>
37 <a href="#installations">Installations</a>
38 <a href="#experience">Experience</a>
39 <a href="#tickets">Practicals</a>
40 </nav>
41
42 <a class="ticket-pill" href="#tickets">
43 <span>Get tickets</span>
44 <svg viewBox="0 0 24 24" aria-hidden="true">
45 <path d="M5 12h12m-5-5 5 5-5 5"/>
46 </svg>
47 </a>
48 </header>
49
50 <main id="main">
51 <section class="hero" id="home" aria-labelledby="hero-title">
52 <div class="vertical-poem" aria-hidden="true">
53 <span>未来を描き、共に創る。</span>
54 <i></i>
55 <img src="./assets/stamp-seal.svg" alt="">
56 </div>
57
58 <div class="hero-copy" data-reveal>
59 <h1 id="hero-title">
60 <span>NEO MIRAI</span>
61 <span>AI DESIGN</span>
62 <span>CONFERENCE</span>
63 </h1>
64 <p class="hero-place">Tokyo 2042</p>
65 <p class="hero-summary">Illustration, interfaces, machines, optimism</p>
66 <div class="hero-meta" aria-label="Conference date and venue">
67 <span>May 20–22, 2042</span>
68 <span>Tokyo International Forum</span>
69 </div>
70 </div>
71
72 <figure class="hero-art" data-reveal>
73 <img src="./assets/hero-city.webp" alt="An illustrated golden future Tokyo skyline with towers, terraces, and visitors walking toward the conference venue.">
74 <figcaption>Systems with warmth. Machines with a human horizon.</figcaption>
75 </figure>
76 </section>
77
78 <section class="agenda-block" id="agenda" aria-labelledby="agenda-title">
79 <div class="agenda-panel" data-reveal>
80 <p class="section-label">Agenda</p>
81 <h2 id="agenda-title">Three days of ideas and inspiration</h2>
82
83 <ol class="agenda-days" aria-label="Conference agenda highlights">
84 <li>
85 <time datetime="2042-05-20">Day 01 <span>05.20</span></time>
86 <div>
87 <h3>New Frontiers</h3>
88 <p>Keynotes, visions, and emerging paradigms.</p>
89 </div>
90 </li>
91 <li>
92 <time datetime="2042-05-21">Day 02 <span>05.21</span></time>
93 <div>
94 <h3>Design x Intelligence</h3>
95 <p>Crafting experiences with AI.</p>
96 </div>
97 </li>
98 <li>
99 <time datetime="2042-05-22">Day 03 <span>05.22</span></time>
100 <div>
101 <h3>Society & Imagination</h3>
102 <p>Systems, ethics, and collective futures.</p>
103 </div>
104 </li>
105 </ol>
106
107 <a class="text-action" href="#tickets">View full agenda <span aria-hidden="true">→</span></a>
108 </div>
109
110 <figure class="agenda-art" data-reveal>
111 <img src="./assets/agenda-architecture.webp" alt="A quiet illustrated architectural platform with amber circles, slim towers, and a lone visitor.">
112 <figcaption>創造は、未来をつくる最初の一歩。</figcaption>
113 </figure>
114 </section>
115
116 <section class="speakers" id="speakers" aria-labelledby="speakers-title">
117 <div class="section-intro" data-reveal>
118 <p class="section-label">Speakers</p>
119 <h2 id="speakers-title">Pioneers shaping tomorrow</h2>
120 <a class="text-action" href="#tickets">View full speakers <span aria-hidden="true">→</span></a>
121 </div>
122
123 <div class="speaker-carousel" data-reveal aria-roledescription="carousel" aria-label="Featured speaker carousel">
124 <div class="speaker-track" id="speaker-track">
125 <article class="speaker-slide is-active" aria-label="Featured speakers set 1">
126 <ul class="speaker-grid" aria-label="Featured speakers, set 1">
127 <li class="speaker-person" style="--speaker-focus-x: 68%; --speaker-focus-y: 48%;" data-kanji="中村由美">
128 <img src="./assets/speaker-yumi-nakamura.webp" alt="Yumi Nakamura illustrated in profile before a golden sun and distant future city.">
129 <div class="speaker-meta">
130 <span>Yumi Nakamura</span>
131 <small>AI Ethicist & Researcher</small>
132 </div>
133 </li>
134 <li class="speaker-person" style="--speaker-focus-x: 52%; --speaker-focus-y: 47%;" data-kanji="田中啓介">
135 <img src="./assets/speaker-keisuke-tanaka.webp" alt="Keisuke Tanaka illustrated before an amber sun and speculative city towers.">
136 <div class="speaker-meta">
137 <span>Keisuke Tanaka</span>
138 <small>Interaction Designer & Creative Director</small>
139 </div>
140 </li>
141 <li class="speaker-person" style="--speaker-focus-x: 42%; --speaker-focus-y: 48%;" data-kanji="李ソフィア">
142 <img src="./assets/speaker-sophia-lee.webp" alt="Sophia Lee illustrated in profile near circular geometry and a temple skyline.">
143 <div class="speaker-meta">
144 <span>Sophia Lee</span>
145 <small>Machine Learning Artist</small>
146 </div>
147 </li>
148 </ul>
149 </article>
150
151 <article class="speaker-slide" aria-label="Featured speakers set 2" aria-hidden="true">
152 <ul class="speaker-grid" aria-label="Featured speakers, set 2">
153 <li class="speaker-person" style="--speaker-focus-x: 44%; --speaker-focus-y: 48%;" data-kanji="渡辺藍子">
154 <img src="./assets/speaker-aiko-watanabe.webp" alt="Aiko Watanabe illustrated in profile against a burnt-orange sun and pine silhouette.">
155 <div class="speaker-meta">
156 <span>Aiko Watanabe</span>
157 <small>Synthetic Media Director</small>
158 </div>
159 </li>
160 <li class="speaker-person" style="--speaker-focus-x: 52%; --speaker-focus-y: 48%;" data-kanji="佐藤蓮">
161 <img src="./assets/speaker-ren-sato.webp" alt="Ren Sato illustrated before Mount Fuji and flowing translucent forms.">
162 <div class="speaker-meta">
163 <span>Ren Sato</span>
164 <small>Robotics Experience Lead</small>
165 </div>
166 </li>
167 <li class="speaker-person" style="--speaker-focus-x: 46%; --speaker-focus-y: 48%;" data-kanji="黒田美奈">
168 <img src="./assets/speaker-mina-kuroda.webp" alt="Mina Kuroda illustrated before a red sun and vertical future towers.">
169 <div class="speaker-meta">
170 <span>Mina Kuroda</span>
171 <small>Computational Typographer</small>
172 </div>
173 </li>
174 </ul>
175 </article>
176
177 <article class="speaker-slide" aria-label="Featured speakers set 3" aria-hidden="true">
178 <ul class="speaker-grid" aria-label="Featured speakers, set 3">
179 <li class="speaker-person" style="--speaker-focus-x: 43%; --speaker-focus-y: 48%;" data-kanji="森花">
180 <img src="./assets/speaker-hana-mori.webp" alt="Hana Mori illustrated against a black eclipse circle and delicate future skyline.">
181 <div class="speaker-meta">
182 <span>Hana Mori</span>
183 <small>Speculative Systems Artist</small>
184 </div>
185 </li>
186 <li class="speaker-person" style="--speaker-focus-x: 52%; --speaker-focus-y: 47%;" data-kanji="伊藤大地">
187 <img src="./assets/speaker-daichi-ito.webp" alt="Daichi Ito illustrated before a red sun and dense machine city.">
188 <div class="speaker-meta">
189 <span>Daichi Ito</span>
190 <small>Neural Interface Researcher</small>
191 </div>
192 </li>
193 <li class="speaker-person" style="--speaker-focus-x: 42%; --speaker-focus-y: 48%;" data-kanji="小林恵美">
194 <img src="./assets/speaker-emi-kobayashi.webp" alt="Emi Kobayashi illustrated near a gold disk and Tokyo tower forms.">
195 <div class="speaker-meta">
196 <span>Emi Kobayashi</span>
197 <small>Civic AI Designer</small>
198 </div>
199 </li>
200 </ul>
201 </article>
202
203 <article class="speaker-slide" aria-label="Featured speakers set 4" aria-hidden="true">
204 <ul class="speaker-grid" aria-label="Featured speakers, set 4">
205 <li class="speaker-person" style="--speaker-focus-x: 70%; --speaker-focus-y: 48%;" data-kanji="荒田健司">
206 <img src="./assets/speaker-kenji-arata.webp" alt="Kenji Arata illustrated before a red sun and distant speculative towers.">
207 <div class="speaker-meta">
208 <span>Kenji Arata</span>
209 <small>Machine Imagination Lab</small>
210 </div>
211 </li>
212 <li class="speaker-person" style="--speaker-focus-x: 52%; --speaker-focus-y: 48%;" data-kanji="古賀直美">
213 <img src="./assets/speaker-naomi-koga.webp" alt="Naomi Koga illustrated below layered amber circles and a small temple skyline.">
214 <div class="speaker-meta">
215 <span>Naomi Koga</span>
216 <small>Data Rituals Curator</small>
217 </div>
218 </li>
219 <li class="speaker-person" style="--speaker-focus-x: 58%; --speaker-focus-y: 48%;" data-kanji="藤本亮">
220 <img src="./assets/speaker-ryo-fujimoto.webp" alt="Ryo Fujimoto illustrated near dark circular geometry and warm technical markings.">
221 <div class="speaker-meta">
222 <span>Ryo Fujimoto</span>
223 <small>Embodied Intelligence Architect</small>
224 </div>
225 </li>
226 </ul>
227 </article>
228 </div>
229
230 <div class="speaker-controls" aria-label="Speaker carousel controls">
231 <button class="speaker-dot is-active" type="button" data-slide="0" aria-label="Show speaker set 1" aria-current="true"></button>
232 <button class="speaker-dot" type="button" data-slide="1" aria-label="Show speaker set 2"></button>
233 <button class="speaker-dot" type="button" data-slide="2" aria-label="Show speaker set 3"></button>
234 <button class="speaker-dot" type="button" data-slide="3" aria-label="Show speaker set 4"></button>
235 </div>
236 </div>
237 </section>
238
239 <section class="installations" id="installations" aria-labelledby="installations-title">
240 <div class="section-intro" data-reveal>
241 <p class="section-label">Installations</p>
242 <h2 id="installations-title">Experiences beyond the screen</h2>
243 <a class="text-action" href="#tickets">Explore installations <span aria-hidden="true">→</span></a>
244 </div>
245
246 <div class="installation-rhythm" data-reveal>
247 <article class="installation-item item-flux">
248 <img src="./assets/install-flux.webp" alt="A tiny visitor standing before a glowing orange spherical installation.">
249 <h3>Harmonic Flux</h3>
250 <p>Immersive environment</p>
251 </article>
252 <article class="installation-item item-dream">
253 <img src="./assets/install-dream.webp" alt="An illustrated generative ribbon floating through an amber exhibition space.">
254 <h3>Dream Compiler</h3>
255 <p>Generative sculpture</p>
256 </article>
257 <article class="installation-item item-echoes">
258 <img src="./assets/install-echoes.webp" alt="A lone visitor in a circular sound installation with a dark center.">
259 <h3>Echoes of Tomorrow</h3>
260 <p>AI soundscape</p>
261 </article>
262 </div>
263 </section>
264
265 <section class="manifesto" id="experience" aria-labelledby="manifesto-title">
266 <div class="manifesto-copy" data-reveal>
267 <p class="section-label">Manifesto</p>
268 <h2 id="manifesto-title">We believe the future is something we design together.</h2>
269 <a class="text-action text-action-light" href="#tickets">The NEO MIRAI manifesto <span aria-hidden="true">→</span></a>
270 </div>
271 <figure class="manifesto-art" data-reveal>
272 <img src="./assets/manifesto-fuji-regenerated.webp" alt="Mount Fuji and a golden future city beneath a red sun.">
273 </figure>
274 </section>
275
276 <section class="tickets" id="tickets" aria-labelledby="tickets-title">
277 <img class="ticket-pine" src="./assets/pine-ticket.png" alt="" aria-hidden="true">
278 <div class="tickets-heading" data-reveal>
279 <p class="section-label">Tickets</p>
280 <h2 id="tickets-title">Choose your experience</h2>
281 </div>
282
283 <div class="ticket-options" data-reveal>
284 <article>
285 <h3>Attendee</h3>
286 <p>Full access to all talks and installations.</p>
287 <strong>¥ 49,000</strong>
288 <a href="mailto:tickets@neomirai.example">Select</a>
289 </article>
290 <article>
291 <h3>Student</h3>
292 <p>Access for students and educators.</p>
293 <strong>¥ 19,000</strong>
294 <a href="mailto:tickets@neomirai.example">Select</a>
295 </article>
296 <article>
297 <h3>Supporter</h3>
298 <p>Support the community and get benefits.</p>
299 <strong>¥ 99,000</strong>
300 <a href="mailto:tickets@neomirai.example">Select</a>
301 </article>
302 <article>
303 <h3>Group</h3>
304 <p>For teams of five or more.</p>
305 <strong>Contact us</strong>
306 <a href="mailto:tickets@neomirai.example">Inquire</a>
307 </article>
308 </div>
309
310 <aside class="ticket-seal" data-reveal>
311 <span class="ticket-seal-label">
312 <span>Get</span>
313 <span>Your</span>
314 <span>Ticket</span>
315 </span>
316 <a href="mailto:tickets@neomirai.example" aria-label="Email ticket office">→</a>
317 </aside>
318 </section>
319 </main>
320
321 <footer class="site-footer">
322 <a class="brand-lockup brand-lockup-small" href="#" aria-label="NEO MIRAI home">
323 <span class="brand-mark" aria-hidden="true"><span></span></span>
324 <span class="brand-word"><span>NEO</span><span>MIRAI</span></span>
325 </a>
326 <p>未来を描き、共に創る。</p>
327 <nav aria-label="Footer navigation">
328 <a href="#agenda">About</a>
329 <a href="#speakers">Partners</a>
330 <a href="#installations">News</a>
331 <a href="#tickets">FAQ</a>
332 <a href="mailto:hello@neomirai.example">Contact</a>
333 </nav>
334 <div class="language-switch" aria-label="Language options">
335 <a href="#" aria-current="true">EN</a>
336 <span>/</span>
337 <a href="#">日本語</a>
338 </div>
339 </footer>
340
341 <script src="./script.js"></script>
342 </body>
343</html>