-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathshelf.html
More file actions
266 lines (248 loc) · 24 KB
/
shelf.html
File metadata and controls
266 lines (248 loc) · 24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shelf</title>
<link rel="icon" href="Im/favicon.webp" type="image/x-icon">
<link rel="stylesheet" href="case-style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<meta name="theme-color" content="#EEF5F7">
</head>
<body style="background-color: #eef5f7;">
<nav style="background-color: rgb(238, 245, 247, 0.8);">
<a href="index" class="link">
<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.650391 17.3906V4.13867C0.650391 4.05404 0.656901 3.97591 0.669922 3.9043C0.682943 3.83268 0.715495 3.75456 0.767578 3.66992C1.06055 3.16862 1.48698 2.70638 2.04688 2.2832C2.61328 1.86003 3.27734 1.52148 4.03906 1.26758C4.80729 1.00716 5.64062 0.876953 6.53906 0.876953C7.60026 0.876953 8.56706 1.06901 9.43945 1.45312C10.3184 1.83073 11.0052 2.32227 11.5 2.92773C11.9883 2.32227 12.6686 1.83073 13.541 1.45312C14.4199 1.06901 15.3932 0.876953 16.4609 0.876953C17.3529 0.876953 18.1797 1.00716 18.9414 1.26758C19.7096 1.52148 20.377 1.86003 20.9434 2.2832C21.5098 2.70638 21.9362 3.16862 22.2227 3.66992C22.2747 3.75456 22.3073 3.83268 22.3203 3.9043C22.3333 3.97591 22.3398 4.05404 22.3398 4.13867V17.3906C22.3398 17.7943 22.2292 18.0807 22.0078 18.25C21.7865 18.4193 21.5326 18.5039 21.2461 18.5039C21.0768 18.5039 20.9141 18.4616 20.7578 18.377C20.6016 18.2988 20.4323 18.2012 20.25 18.084C19.7096 17.7194 19.1172 17.4297 18.4727 17.2148C17.8346 17.0065 17.1771 16.9056 16.5 16.9121C15.7904 16.9186 15.097 17.0521 14.4199 17.3125C13.7493 17.5729 13.1406 17.9668 12.5938 18.4941C12.3854 18.6895 12.1934 18.8229 12.0176 18.8945C11.8483 18.9727 11.6758 19.0117 11.5 19.0117C11.3177 19.0117 11.1419 18.9727 10.9727 18.8945C10.8034 18.8229 10.6113 18.6895 10.3965 18.4941C9.84961 17.9668 9.23763 17.5729 8.56055 17.3125C7.88997 17.0521 7.20312 16.9186 6.5 16.9121C5.81641 16.9056 5.15234 17.0065 4.50781 17.2148C3.86979 17.4297 3.2806 17.7194 2.74023 18.084C2.55794 18.2012 2.38867 18.2988 2.23242 18.377C2.07617 18.4616 1.91667 18.5039 1.75391 18.5039C1.46094 18.5039 1.20378 18.4193 0.982422 18.25C0.761068 18.0807 0.650391 17.7943 0.650391 17.3906ZM2.22266 16.5605C2.73698 16.1895 3.37174 15.8932 4.12695 15.6719C4.88216 15.4505 5.6862 15.3398 6.53906 15.3398C7.07943 15.3398 7.60677 15.4017 8.12109 15.5254C8.63542 15.6426 9.11068 15.8053 9.54688 16.0137C9.98958 16.222 10.377 16.4596 10.709 16.7266V4.42188C10.3639 3.82292 9.8138 3.3444 9.05859 2.98633C8.30339 2.62826 7.46354 2.44922 6.53906 2.44922C5.93359 2.44922 5.35091 2.5306 4.79102 2.69336C4.23763 2.84961 3.73633 3.07096 3.28711 3.35742C2.83789 3.64388 2.48307 3.97917 2.22266 4.36328V16.5605ZM12.2812 16.7266C12.6133 16.4596 13.0007 16.222 13.4434 16.0137C13.8861 15.8053 14.3613 15.6426 14.8691 15.5254C15.3835 15.4017 15.9141 15.3398 16.4609 15.3398C17.3073 15.3398 18.1081 15.4505 18.8633 15.6719C19.6185 15.8932 20.2533 16.1895 20.7676 16.5605V4.36328C20.5072 3.97917 20.1523 3.64388 19.7031 3.35742C19.2539 3.07096 18.7493 2.84961 18.1895 2.69336C17.6361 2.5306 17.0599 2.44922 16.4609 2.44922C15.5299 2.44922 14.6868 2.62826 13.9316 2.98633C13.1764 3.3444 12.6263 3.82292 12.2812 4.42188V16.7266Z" stroke="none"/>
</svg>
<p>Home</p>
</a>
<a href="designs" class="link">
<svg width="28" height="18" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.959 14.8437L12.7129 15.7031C12.5892 15.7487 12.4785 15.7194 12.3809 15.6152C12.2897 15.5176 12.2702 15.4102 12.3223 15.293L13.25 13.125L23.6406 2.74414L25.3496 4.46289L14.959 14.8437ZM26.209 3.62304L24.4707 1.90429L25.4668 0.927729C25.7142 0.686844 25.9648 0.556636 26.2188 0.537104C26.4792 0.517573 26.7201 0.618485 26.9414 0.839839L27.2734 1.17187C27.5013 1.39973 27.6055 1.64062 27.5859 1.89453C27.5729 2.14843 27.4427 2.40234 27.1953 2.65624L26.209 3.62304ZM1.11133 15.4883C0.896487 14.7721 0.841148 14.1211 0.945315 13.5352C1.05599 12.9427 1.2806 12.4056 1.61914 11.9238C1.95768 11.4355 2.3711 10.9928 2.85938 10.5957C3.34766 10.1921 3.86849 9.82421 4.42188 9.49218C4.97526 9.15364 5.51563 8.83789 6.04297 8.54492C6.94141 8.04362 7.63151 7.62695 8.11328 7.29492C8.59505 6.96289 8.91407 6.66992 9.07032 6.41601C9.22657 6.15559 9.26237 5.88867 9.17774 5.61523C9.11263 5.39388 8.90755 5.24414 8.5625 5.16601C8.21745 5.08138 7.78125 5.05859 7.25391 5.09765C6.73308 5.1302 6.16667 5.22135 5.55469 5.37109C4.94922 5.52083 4.34375 5.7194 3.73828 5.96679C3.13282 6.21419 2.57943 6.5039 2.07813 6.83593C1.90886 6.95312 1.7461 6.99218 1.58985 6.95312C1.44011 6.90755 1.31966 6.81966 1.22852 6.68945C1.14388 6.55924 1.11133 6.41601 1.13086 6.25976C1.15039 6.10351 1.24805 5.97005 1.42383 5.85937C2.11393 5.39713 2.83985 5.01627 3.60157 4.71679C4.36979 4.4108 5.12175 4.1927 5.85742 4.06249C6.59961 3.92578 7.28321 3.8802 7.90821 3.92578C8.53972 3.96484 9.06706 4.0983 9.49024 4.32617C9.91341 4.54752 10.1901 4.86653 10.3203 5.2832C10.4961 5.88867 10.4538 6.42903 10.1934 6.90429C9.93946 7.37955 9.54232 7.81575 9.00196 8.21289C8.46159 8.61002 7.85287 8.99414 7.17578 9.36523C6.50521 9.72981 5.83464 10.1042 5.16407 10.4883C4.5 10.8659 3.90755 11.2793 3.38672 11.7285C2.86589 12.1712 2.49154 12.6725 2.26367 13.2324C2.03581 13.7858 2.03255 14.4238 2.25391 15.1465C2.40365 15.6478 2.72917 16.0384 3.23047 16.3184C3.73177 16.5983 4.35677 16.7578 5.10547 16.7969C5.86068 16.8424 6.69401 16.7643 7.60547 16.5625C8.52344 16.3607 9.47396 16.0319 10.457 15.5762L10.9648 16.6504C9.79948 17.1907 8.67318 17.5651 7.58594 17.7734C6.4987 17.9883 5.50586 18.0436 4.60742 17.9394C3.7155 17.8418 2.96354 17.5879 2.35157 17.1777C1.73959 16.7676 1.32617 16.2044 1.11133 15.4883Z" stroke="none"/>
</svg>
<p>Designs</p>
</a>
<a href="about" class="link">
<svg width="31" height="14" viewBox="0 0 31 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.06836 13.043C7.22201 13.043 6.43099 12.8867 5.69531 12.5742C4.95964 12.2552 4.31185 11.819 3.75195 11.2656C3.19206 10.7057 2.7526 10.0579 2.43359 9.32227C2.12109 8.58008 1.96484 7.78906 1.96484 6.94922C1.96484 6.10938 2.12109 5.32161 2.43359 4.58594C2.7526 3.85026 3.19206 3.20247 3.75195 2.64258C4.31185 2.08268 4.95964 1.64648 5.69531 1.33398C6.43099 1.01497 7.22201 0.855469 8.06836 0.855469C8.9082 0.855469 9.69596 1.01497 10.4316 1.33398C11.1673 1.64648 11.8118 2.08268 12.3652 2.64258C12.9251 3.20247 13.3613 3.85026 13.6738 4.58594C13.9928 5.32161 14.1523 6.10938 14.1523 6.94922C14.1523 7.78906 13.9928 8.58008 13.6738 9.32227C13.3613 10.0579 12.9251 10.7057 12.3652 11.2656C11.8118 11.819 11.1673 12.2552 10.4316 12.5742C9.69596 12.8867 8.9082 13.043 8.06836 13.043ZM8.06836 11.3926C8.67383 11.3926 9.24349 11.2786 9.77734 11.0508C10.3177 10.8164 10.7897 10.4974 11.1934 10.0938C11.6035 9.68359 11.9225 9.21159 12.1504 8.67773C12.3848 8.13737 12.502 7.5612 12.502 6.94922C12.502 6.33724 12.3848 5.76432 12.1504 5.23047C11.9225 4.6901 11.6035 4.2181 11.1934 3.81445C10.7897 3.4043 10.3177 3.08529 9.77734 2.85742C9.24349 2.62305 8.67383 2.50586 8.06836 2.50586C7.44987 2.50586 6.87044 2.62305 6.33008 2.85742C5.79622 3.08529 5.32422 3.4043 4.91406 3.81445C4.51042 4.2181 4.19141 4.6901 3.95703 5.23047C3.72917 5.76432 3.61523 6.33724 3.61523 6.94922C3.61523 7.5612 3.72917 8.13737 3.95703 8.67773C4.19141 9.2181 4.51042 9.69336 4.91406 10.1035C5.32422 10.5072 5.79622 10.8229 6.33008 11.0508C6.87044 11.2786 7.44987 11.3926 8.06836 11.3926ZM22.9414 13.043C22.0951 13.043 21.304 12.8867 20.5684 12.5742C19.8327 12.2552 19.1849 11.819 18.625 11.2656C18.0651 10.7057 17.6257 10.0579 17.3066 9.32227C16.9941 8.58008 16.8379 7.78906 16.8379 6.94922C16.8379 6.10938 16.9941 5.32161 17.3066 4.58594C17.6257 3.85026 18.0651 3.20247 18.625 2.64258C19.1849 2.08268 19.8327 1.64648 20.5684 1.33398C21.304 1.01497 22.0951 0.855469 22.9414 0.855469C23.7812 0.855469 24.569 1.01497 25.3047 1.33398C26.0404 1.64648 26.6849 2.08268 27.2383 2.64258C27.7982 3.20247 28.2344 3.85026 28.5469 4.58594C28.8659 5.32161 29.0254 6.10938 29.0254 6.94922C29.0254 7.78906 28.8659 8.58008 28.5469 9.32227C28.2344 10.0579 27.7982 10.7057 27.2383 11.2656C26.6849 11.819 26.0404 12.2552 25.3047 12.5742C24.569 12.8867 23.7812 13.043 22.9414 13.043ZM22.9414 11.3926C23.5534 11.3926 24.1263 11.2786 24.6602 11.0508C25.2005 10.8229 25.6725 10.5072 26.0762 10.1035C26.4863 9.69336 26.8053 9.2181 27.0332 8.67773C27.2611 8.13737 27.375 7.5612 27.375 6.94922C27.375 6.33724 27.2611 5.76432 27.0332 5.23047C26.8053 4.6901 26.4863 4.2181 26.0762 3.81445C25.6725 3.4043 25.2005 3.08529 24.6602 2.85742C24.1263 2.62305 23.5534 2.50586 22.9414 2.50586C22.3229 2.50586 21.7435 2.62305 21.2031 2.85742C20.6693 3.08529 20.1973 3.4043 19.7871 3.81445C19.3835 4.2181 19.0645 4.6901 18.8301 5.23047C18.6022 5.76432 18.4883 6.33724 18.4883 6.94922C18.4883 7.5612 18.6022 8.13737 18.8301 8.67773C19.0645 9.21159 19.3835 9.68359 19.7871 10.0938C20.1973 10.4974 20.6693 10.8164 21.2031 11.0508C21.7435 11.2786 22.3229 11.3926 22.9414 11.3926ZM2.60938 5.74805V7.62305H0.822266C0.333984 7.62305 0.0898438 7.37565 0.0898438 6.88086V6.48047C0.0898438 5.99219 0.333984 5.74805 0.822266 5.74805H2.60938ZM28.3809 7.62305V5.74805H30.1777C30.6595 5.74805 30.9004 5.99219 30.9004 6.48047V6.88086C30.9004 7.37565 30.6595 7.62305 30.1777 7.62305H28.3809ZM13.6738 7.30078V5.5332C13.9473 5.40299 14.25 5.31185 14.582 5.25977C14.9141 5.20117 15.2201 5.17188 15.5 5.17188C15.7734 5.17188 16.0762 5.20117 16.4082 5.25977C16.7402 5.31185 17.0462 5.40299 17.3262 5.5332V7.30078C17.0788 7.15104 16.7923 7.03711 16.4668 6.95898C16.1413 6.88086 15.819 6.8418 15.5 6.8418C15.1745 6.8418 14.849 6.88086 14.5234 6.95898C14.2044 7.03711 13.9212 7.15104 13.6738 7.30078Z" stroke="none"/>
</svg>
<p>About</p>
</a>
<a href="audio" class="link">
<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.26758 13.2246C1.05273 13.2246 0.870443 13.1465 0.720703 12.9902C0.570964 12.834 0.496094 12.6484 0.496094 12.4336V9.47461C0.496094 9.25977 0.570964 9.07422 0.720703 8.91797C0.870443 8.75521 1.05273 8.67383 1.26758 8.67383C1.49544 8.67383 1.68424 8.75521 1.83398 8.91797C1.99023 9.07422 2.06836 9.25977 2.06836 9.47461V12.4336C2.06836 12.6484 1.99023 12.834 1.83398 12.9902C1.68424 13.1465 1.49544 13.2246 1.26758 13.2246ZM4.55859 17.2188C4.33724 17.2188 4.15169 17.1439 4.00195 16.9941C3.85221 16.8379 3.77734 16.6491 3.77734 16.4277V5.48047C3.77734 5.25911 3.85221 5.07031 4.00195 4.91406C4.15169 4.75781 4.33724 4.67969 4.55859 4.67969C4.78646 4.67969 4.97526 4.75781 5.125 4.91406C5.27474 5.07031 5.34961 5.25911 5.34961 5.48047V16.4277C5.34961 16.6491 5.27474 16.8379 5.125 16.9941C4.97526 17.1439 4.78646 17.2188 4.55859 17.2188ZM7.83984 21.1543C7.61849 21.1543 7.43294 21.0762 7.2832 20.9199C7.13997 20.7702 7.06836 20.5846 7.06836 20.3633V1.54492C7.06836 1.32357 7.13997 1.13802 7.2832 0.988281C7.43294 0.832031 7.61849 0.753906 7.83984 0.753906C8.06771 0.753906 8.25651 0.832031 8.40625 0.988281C8.5625 1.13802 8.64062 1.32357 8.64062 1.54492V20.3633C8.64062 20.5846 8.5625 20.7702 8.40625 20.9199C8.25651 21.0762 8.06771 21.1543 7.83984 21.1543ZM11.1309 16.0273C10.9095 16.0273 10.724 15.9525 10.5742 15.8027C10.4245 15.653 10.3496 15.4674 10.3496 15.2461V6.66211C10.3496 6.44076 10.4245 6.25521 10.5742 6.10547C10.724 5.94922 10.9095 5.87109 11.1309 5.87109C11.3522 5.87109 11.5378 5.94922 11.6875 6.10547C11.8438 6.25521 11.9219 6.44076 11.9219 6.66211V15.2461C11.9219 15.4674 11.8438 15.653 11.6875 15.8027C11.5378 15.9525 11.3522 16.0273 11.1309 16.0273ZM14.4219 18.9863C14.194 18.9863 14.0052 18.9082 13.8555 18.752C13.7057 18.6022 13.6309 18.4199 13.6309 18.2051V3.70312C13.6309 3.48828 13.7057 3.30273 13.8555 3.14648C14.0052 2.99023 14.194 2.91211 14.4219 2.91211C14.6432 2.91211 14.8288 2.99023 14.9785 3.14648C15.1283 3.30273 15.2031 3.48828 15.2031 3.70312V18.2051C15.2031 18.4199 15.1283 18.6022 14.9785 18.752C14.8288 18.9082 14.6432 18.9863 14.4219 18.9863ZM17.7031 14.0645C17.4753 14.0645 17.2865 13.9896 17.1367 13.8398C16.9935 13.6836 16.9219 13.498 16.9219 13.2832V8.625C16.9219 8.41016 16.9935 8.22461 17.1367 8.06836C17.2865 7.91211 17.4753 7.83398 17.7031 7.83398C17.9245 7.83398 18.11 7.91211 18.2598 8.06836C18.416 8.22461 18.4941 8.41016 18.4941 8.625V13.2832C18.4941 13.498 18.416 13.6836 18.2598 13.8398C18.11 13.9896 17.9245 14.0645 17.7031 14.0645Z" stroke="none"/>
</svg>
<p>Audio</p>
</a>
</nav>
<header>
<img src="Im/shelf-app.webp" class="app">
<strong>Shelf</strong>
<h1>A new frontier of<br class="hide-mobile"> self-expression.</h1>
<header class="key">
<img src="Im/shelf-key.webp">
<header>
<h1>Designed for Introspection.</h1>
<p>
Discover yourself with Shelf. Explore your thoughts and dreams in an intuitive new space. Your ideas, memories, and emotions come to life in vibrant colors and classic forms. Navigate your collection by swiping through spaces or tapping through tunnels. Give your ideas, mood boards, and late-night musings a better place to live, one designed for introspection and self-discovery.
</p>
</header>
</header>
</header>
<section class="subtitle blue">
<h4>Hello, Shelf.</h4>
</section>
<article>
<section>
<h5 class="blue">Creative Expression</h5>
<h2>Bringing color and <br class="hide-mobile">character to thought.</h2>
<h6>
Organizing notes and photos on iPhone feels sterile compared to decorating our homes. Our walls hold memories and personality — yet digital spaces remain kind of cold.<br><br>
In Shelf, your thoughts and most intimate ideas decorate the shelves. And by color-coding spaces or adding tunnels, you can create museums of ideas or deep labyrinths as complex and beautiful as you.
</h6>
</section>
<div class="side-text">
<h3 class="left-text">Your thoughts<br> are the decor.</h3>
<div class="holder">
<img src="Im/shelf-intro.webp">
</div>
</div>
<div class="above-text extra-padding">
<h4 class="secondary">A range of <br class="hide-desktop">ways to express yourself.</h4>
<div class="holder special">
<img src="Im/shelf-items-1.webp" class="hide-mobile">
<img src="Im/shelf-items-2.webp" class="hide-desktop">
</div>
</div>
<section class="together">
<div class="side-text">
<h3 class="left-text">Add as fast <br>as you think.</h3>
<div class="holder">
<img src="Im/shelf-cabinet.webp">
</div>
</div>
<div class="side-text">
<div class="holder">
<img src="Im/shelf-themes.webp">
</div>
<h3 class="right-text">And easily <br>change themes.</h3>
</div>
</section>
<div class="text-grid">
<div class="text">
<strong class="blue">Design</strong>
<p>
Inspired by the beauty and simplicity of shelves in our homes, Shelf feels familiar yet utterly unique. Its bold and brilliant color invites you to rethink, reshape, and reorganize.
This is thinking elevated to an art form—a place that is actually a part of creative conversation.
</p>
</div>
<div class="text">
<strong class="blue">You're an Art Curator</strong>
<p>
Shelf's cabinet makes trying out new colors easy. And because it's built into every shelf, it can add items as fast as you think of them.
If your shelves overflow, older items get safely tucked away in the cabinet. Think of yourself as an art curator. Some exhibitions only last so long. Others, well, they're due for a revival.
</p>
</div>
<div class="text">
<strong class="blue">Organization</strong>
<p>
This case explores new approaches to organizing your digital artifacts.
I envisioned a space where users could easily store their notes, photos, voice memos, and more in a reliable, fun, and timeless place. One that encourages creative organization, beyond the constraints of traditional list views.
</p>
</div>
</div>
</article>
<section class="subtitle blue">
<h4>Items</h4>
</section>
<article>
<section>
<h5 class="blue">A Labyrinth of Thought</h5>
<h2>A digital third place.</h2>
<h6>
“Third places" are communal spaces beyond home and work. Sociologist Ray Oldenburg coined this term for informal spots where we gather, chat, and simply enjoy each other's company. Cafes, parks, pubs — they let us to unwind and connect without demanding productivity.<br><br>
Today, software provides few of these spaces to mediate between work and private life. Shelf is an attempt to envision such a place — and really, it’s a place. You can get lost in your own mazes of thought by building elaborate tunnels or in a long session curating your next exhibition.
</h6>
</section>
<div class="side-text">
<h3 class="left-text secondary"><span>Time. </span> Your<br>only password.</h3>
<div class="holder">
<img src="Im/shelf-time-capsule.webp">
</div>
</div>
<div class="above-text">
<h3>Write.<br>Reminisce.<br>Enjoy.</h3>
<div class="holder three-across">
<img src="Im/shelf-view.webp">
</div>
</div>
<div class="text-grid">
<div class="text">
<strong class="blue">Time Capsules</strong>
<p>
In times past, people buried collections of everyday items in the earth to be unearthed years later. With Time Capsules, securely seal pieces of you away in encrypted envelopes, for days, weeks, months or even seasons.
</p>
</div>
<div class="text">
<strong class="blue">Artifacts</strong>
<p>
Artifacts adapt to your aesthetic, only needing the two primary colors from your shelf space. Viewing them should be an intimate experience, but in places where it makes sense like with links, time capsules, or voice memos, you can swipe to see all of one type in the same view.
</p>
</div>
</div>
</article>
<section class="subtitle blue">
<h4>Introspection</h4>
</section>
<article>
<section>
<h5 class="blue">Tunnels</h5>
<h2>Expand your collection.</h2>
<h6>
Tunnels help create organized labyrinths of self-expression, getting darker and more limited as you progress deeper into a space, encouraging more thoughtful use. Tunnels inspire introspection by drawing one inward both visually and metaphorically, created to make your innermost thoughts as easy to find as a Van Gogh in MoMA.<br><br>
Tunnel titles help you group main ideas. They're like their own rooms. The end result is an engaging way to take inventory of your evolving thoughts and feelings.
</h6>
</section>
<div class="above-text">
<h3>Up to three layers of tunnel.</h3>
<div class="holder four-across">
<img src="Im/shelf-tunnels.webp">
</div>
</div>
<div class="text-grid">
<div class="text">
<strong class="blue">Introspection</strong>
<p>
Started as a project into personal journaling, Shelf at its core is made for introspection. The time capsule artifact, for example, locks away items with time. This encourages one to leave notes for their future self—a reminder of how far they've come.
</p>
</div>
<div class="text">
<strong class="blue">As Big as The Met</strong>
<p>
There is no limit to the amount of tunnels you can have in Shelf. You can even make a whole room of tunnels if you like. And in the odd chance that a space capable of holding 1,944 artifacts isn't enough, just create another space!
</p>
</div>
</div>
</article>
<section class="subtitle blue">
<h4>In a Spatial Computer</h4>
</section>
<article class="visionOS" style="background-image: url(Im/shelf-vision-1.webp);">
<h5 class="white">Your shelf, life-sized.</h5>
</article>
<article class="lessons">
<section>
<h5 class="blue">In Apple Vision Pro</h5>
<h2>Just reach for what you want.</h2>
</section>
<div class="text-grid">
<div class="text">
<strong class="blue">Exploring Interaction</strong>
<p>
Could Shelf decorate our homes? With the right scale and customization, it just might. What if you could write a hand written letter on a desk and walk it over to its right place? Or rip it up to delete it? What if when you put your ear to a voice memo, it starts to play? Welcome to spatial computing.
</p>
</div>
<div class="text">
<strong class="blue"> Emotional Design</strong>
<p>
What if you could knock over a shelf and watch your stuff fall onto the ground? Maybe you could pick up an idea, a literal idea, and turn it over in your hands, and place it somewhere new, like tidying your room. Shelf's metaphor opens up exciting possibilities to connect with your thoughts in insanely natural ways. In Shelf, the future of emotional design is wide open.
</p>
</div>
</div>
</article>
<article class="visionOS" style="background-image: url(Im/shelf-vision-2.webp);">
<h5 class="white">Up to three spaces at once.</h5>
</article>
<article class="visionOS" style="background-image: url(Im/shelf-vision-3.webp);">
<h5 class="white">And open up to three tunnels.</h5>
</article>
<section class="subtitle blue">
<h4>Lessons Learned</h4>
</section>
<article class="lessons">
<section>
<h5 class="blue">Shelf</h5>
<h2>An alternative metaphor<br> for mobile computing.</h2>
</section>
<div class="text-grid">
<div class="text">
<strong class="blue">The 'Desktop'</strong>
<p>
The desktop metaphor has dominated personal computing for 50 years. But if we looked instead to shelves, what would we find? I looked at as many shelves as I could, studying how and why people put things where they do. In many ways, I wanted a place that felt enormously personal yet limited, focused, and tactile. Today, we use computing metaphors mostly for productivity, but I think Shelf is what happens when we aim for something else.
</p>
</div>
<div class="text">
<strong class="blue">What Does Journaling Look Like in a 100 Years?</strong>
<p>
The project was born when a friend asked me to dream up a more aesthetic journaling app. I drew the app icon first and simply let the interface emerge out of it. A lot of features, like nesting, color changing, and note taking are already done quite well elsewhere. But Shelf feels more friendly and approachable than anything I've ever seen.
</p>
</div>
</div>
</article>
<article class="iterations">
<h5 class="blue">Getting to Shelf</h5>
<div class="holder">
<img src="Im/shelf-iteration.webp">
</div>
</article>
</body>