gradientspaces.github.io/gradient-space.html at main · GradientSpaces/gradientspaces.github.io · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta
      name="description"
      content="The Gradient Space — the Gradient Spaces Lab's experimental space in Y2E2 at Stanford for user studies, robot experiments, and physical-digital experiences."
    >
    <title>Gradient Space | Gradient Spaces Lab</title>
    <meta property="og:title" content="Gradient Space | Gradient Spaces Lab">
    <meta property="og:description" content="Our space for capturing the real world, connecting physical and digital worlds, and creating new experiences.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://gradientspaces.github.io/gradient-space.html">
    <link rel="canonical" href="https://gradientspaces.github.io/gradient-space.html">
    <link rel="icon" type="image/png" href="assets/images/GradientSpacesLogo.png">
    <link rel="apple-touch-icon" href="assets/images/GradientSpacesLogo.png">
    <link rel="stylesheet" href="styles.css?v=20260925">
  </head>
  <body>
    <header class="site-header">
      <a class="brand" href="index.html">Gradient Spaces</a>
      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" title="Open navigation">
        <span class="sr-only">Menu</span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </button>
      <nav class="site-nav" id="site-nav" aria-label="Main navigation">
        <a href="index.html">Home</a>
        <a href="people.html">People</a>
        <a href="research.html">Research</a>
        <a href="teaching.html">Teaching</a>
        <a href="events.html">Events</a>
        <a class="active" href="gradient-space.html">Gradient Space</a>
        <a href="index.html#news">News</a>
        <a href="index.html#connect">Connect</a>
      </nav>
    </header>

    <main>
      <section class="page-hero">
        <div>
          <p class="eyebrow">Our Space</p>
          <h1>Gradient Space</h1>
          <p class="lead">
            A space for running experiments with users and robots, testing and developing our methods,
            holding workshops, and coming together.
          </p>
        </div>
        <div class="photo-gallery" data-gallery role="region" aria-roledescription="carousel" aria-label="Photos of the Gradient Space">
          <div class="gallery-stage">
            <figure class="gallery-slide is-active" data-gallery-slide aria-hidden="false">
              <img
                src="assets/images/carousel/group-photo-2026-indoors.jpeg"
                alt="The Gradient Spaces group members sitting in the Gradient Space lab."
              >
              <figcaption>The Gradient Spaces group in the lab, 2026.</figcaption>
            </figure>
            <figure class="gallery-slide" data-gallery-slide aria-hidden="true">
              <div class="photo-placeholder lunch-placeholder" aria-hidden="true">
                <small>Photo coming soon</small>
                <span>Robot experiments</span>
              </div>
              <figcaption>Running experiments with robots.</figcaption>
            </figure>
            <figure class="gallery-slide" data-gallery-slide aria-hidden="true">
              <div class="photo-placeholder outing-placeholder" aria-hidden="true">
                <small>Photo coming soon</small>
                <span>User studies</span>
              </div>
              <figcaption>Studies with users in mixed reality.</figcaption>
            </figure>
            <figure class="gallery-slide" data-gallery-slide aria-hidden="true">
              <div class="photo-placeholder lunch-placeholder" aria-hidden="true">
                <small>Photo coming soon</small>
                <span>Workshops</span>
              </div>
              <figcaption>Workshops and coming together.</figcaption>
            </figure>
          </div>
          <div class="gallery-controls">
            <button type="button" class="gallery-arrow" data-gallery-previous aria-label="Show previous photo">←</button>
            <div class="gallery-dots" role="group" aria-label="Choose a photo">
              <button type="button" class="gallery-dot is-active" data-gallery-dot="0" aria-label="Show group photo in the lab" aria-current="true"></button>
              <button type="button" class="gallery-dot" data-gallery-dot="1" aria-label="Show robot experiments photo"></button>
              <button type="button" class="gallery-dot" data-gallery-dot="2" aria-label="Show user studies photo"></button>
              <button type="button" class="gallery-dot" data-gallery-dot="3" aria-label="Show workshops photo"></button>
            </div>
            <button type="button" class="gallery-pause" data-gallery-pause aria-pressed="false">Pause</button>
            <button type="button" class="gallery-arrow" data-gallery-next aria-label="Show next photo">→</button>
          </div>
        </div>
      </section>

      <section class="section" aria-labelledby="about-space-title">
        <div class="section-heading">
          <p class="section-kicker">About</p>
          <h2 id="about-space-title">Where physical meets digital</h2>
        </div>
        <div class="body-copy">
          <p>
            What makes the Gradient Space special is its equipment. It lets us capture the real world,
            connect physical and digital worlds, and create new experiences. It is where our methods move
            from development to testing with real people, real robots, and real environments.
          </p>
        </div>
      </section>

      <section class="section" aria-labelledby="equipment-title">
        <div class="section-heading">
          <p class="section-kicker">Equipment</p>
          <h2 id="equipment-title">What's in the space</h2>
        </div>
        <div class="equipment-grid">
          <article class="equipment-card">
            <p class="section-kicker">Mixed reality</p>
            <ul>
              <li>Apple Vision Pro <span>×1</span></li>
              <li>Meta Quest Pro <span>×1</span></li>
              <li>Meta Quest 3 <span>×10</span></li>
              <li>XREAL Air 2 <span>×10</span></li>
            </ul>
          </article>
          <article class="equipment-card">
            <p class="section-kicker">Haptics</p>
            <ul>
              <li>Nova 2 haptic gloves <span>×5</span></li>
              <li>bHaptics TactSuit Pro suits <span>×5</span></li>
              <li>bHaptics anklets <span>×5</span></li>
            </ul>
          </article>
          <article class="equipment-card">
            <p class="section-kicker">Audio</p>
            <ul>
              <li>360° spatial audio system</li>
            </ul>
          </article>
          <article class="equipment-card">
            <p class="section-kicker">Lighting &amp; projection</p>
            <ul>
              <li>Professional-grade directional lighting</li>
              <li>3D projector</li>
            </ul>
          </article>
        </div>
      </section>

      <section class="section" aria-labelledby="location-title">
        <div class="section-heading">
          <p class="section-kicker">Location</p>
          <h2 id="location-title">Find us</h2>
        </div>
        <dl class="info-grid">
          <div class="info-row">
            <dt>Room</dt>
            <dd>Y2E2, Room 274</dd>
          </div>
          <div class="info-row">
            <dt>Address</dt>
            <dd>473 Via Ortega, Stanford, CA 94305</dd>
          </div>
        </dl>
      </section>
    </main>

    <footer class="site-footer">
      <div class="footer-identity">
        <a href="https://cee.stanford.edu/" aria-label="Stanford Civil and Environmental Engineering">
          <img src="assets/images/stanford-cee-lockup.png" alt="Stanford University — Civil &amp; Environmental Engineering">
        </a>
        <a class="footer-soe-logo" href="https://engineering.stanford.edu/">
          <img src="assets/images/stanford-engineering-logo.png" alt="Stanford Engineering" width="1080" height="101">
        </a>
        <p>Gradient Spaces Research Group</p>
      </div>
      <div class="footer-meta">
        <p>Y2E2, 473 Via Ortega, Stanford, CA 94305</p>
        <p>Site owner: Iro Armeni · iarmeni@stanford.edu</p>
        <p class="footer-accessibility"><a href="https://www.stanford.edu/site/accessibility">Accessibility</a></p>
      </div>
    </footer>

    <script src="script.js?v=20260925"></script>
  </body>
</html>