scalejoy-website/index.html at main · hellaryzhang/scalejoy-website · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>recreation — scalejoy.org</title>
  <meta name="description" content="recreation. play. pause. resolve." />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="grain" aria-hidden="true"></div>

  <!-- ── 1: Hero ── -->
  <section id="hero">
    <img class="logo" src="https://ik.imagekit.io/awnp/final%20outputs/025%20rec_re_a_tion%20-%202.png?updatedAt=1769891577345" alt="recreation" />
    <span class="corner-label">scalejoy.org</span>
  </section>

  <!-- ── 2: What ── -->
  <section id="what">
    <div class="text-block">
      <h2 class="reveal">building the infrastructure<br>for thriving</h2>
      <p class="reveal">
        Modern life takes place within fully built-out systems of
        distraction and a loneliness epidemic.
      </p>
      <p class="reveal">
        rec·re·a·tion is a
        nonprofit organization and a social sculpture: an experiment to
        build scalable structures for individual flourishing. In short,
        to scale joy.
      </p>
    </div>
    <img
      class="section-art what-art reveal"
      src="https://ik.imagekit.io/awnp/final%20outputs/025%20rec_re_a_tion%20-%205.png?updatedAt=1769891577183"
      alt=""
      aria-hidden="true"
    />
    <span class="corner-label">what</span>
  </section>

  <!-- ── 3: Pilot ── -->
  <section id="pilot">
    <img
      class="section-art pilot-art reveal"
      src="https://ik.imagekit.io/awnp/final%20outputs/025%20rec_re_a_tion%20-%201.jpeg?updatedAt=1769891578495"
      alt=""
      aria-hidden="true"
    />
    <div class="pilot-content">
      <div class="reveal pilot-label">chicago · 2025</div>
      <h3 class="reveal">now running our first pilot</h3>
      <p class="reveal">
        Weekly gatherings take one of three forms: <span class="token-play">play</span> (sharing of
        personal pursuits), <span class="token-pause">pause</span> (reflection), and <span class="token-resolve">resolve</span>
        (intention-setting).
      </p>
      <p class="reveal">
        Grounded in Aristotelian friendships of
        virtue and bell hooks' definition of love, our belief is that a
        sense of both purpose and belonging are critical to thriving.
      </p>
    </div>
    <span class="corner-label">pilot</span>
  </section>

  <!-- ── 4: Connect ── -->
  <section id="connect">
    <div class="connect-inner">
      <p class="reveal connect-eyebrow">stay in touch</p>
      <a class="reveal email-link" href="mailto:hello@scalejoy.org?subject=hi from scalejoy.org">
        hello@scalejoy.org
      </a>
    </div>

    <div class="org-details reveal">
      <strong>recreation foundation</strong>
      <span class="dot-sep">·</span> 501(c)(3) nonprofit
      <span class="dot-sep">·</span> ein: 33-1567485<br />
      1512 florence ave, evanston, il 60201
      <span class="dot-sep">·</span> est. 2024
    </div>

    <div class="accent-dots reveal" aria-hidden="true">
      <span style="background:#4ECFED"></span>
      <span style="background:#5CB85C"></span>
      <span style="background:#E8738A"></span>
    </div>

    <span class="corner-label">connect</span>
  </section>

  <script>
    const observer = new IntersectionObserver(
      entries => entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }
      }),
      { threshold: 0.12 }
    );
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  </script>

</body>
</html>