Explorer
project
index.html
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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RloopUI — Articles</title>
</head>
<body>
<div class="bg-orbs" aria-hidden="true">
<span class="orb o1"></span>
<span class="orb o2"></span>
<span class="orb o3"></span>
</div>
<!-- Header -->
<header class="site-header glass">
<div class="container nav">
<a href="#" class="brand">
<span class="brand-mark">R</span>
<span class="brand-text">Rloop<span class="accent">UI</span></span>
</a>
<nav class="nav-links" id="navLinks">
<a href="#" class="active">Articles</a>
<a href="#">Topics</a>
<a href="#">Authors</a>
<a href="#">About</a>
</nav>
<div class="nav-actions">
<button class="icon-btn" id="themeBtn" aria-label="Theme">
<svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
<svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
</button>
<button class="btn btn-primary hide-sm">Subscribe</button>
<button class="icon-btn only-mobile" id="menuBtn" aria-label="Menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</div>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero container">
<div class="hero-pill glass">✨ New essays every Sunday</div>
<h1>Stories on design, code, and the craft of building.</h1>
<p class="lead">A curated journal exploring product thinking, interface design, and the quiet details that make software feel alive.</p>
<div class="hero-search glass">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input placeholder="Search articles, topics, authors…" />
<button class="btn btn-primary">Search</button>
</div>
<div class="topics">
<button class="topic active">All</button>
<button class="topic">Design</button>
<button class="topic">Engineering</button>
<button class="topic">Product</button>
<button class="topic">Interviews</button>
<button class="topic">Tutorials</button>
</div>
</section>
<!-- Articles grid -->
<section class="container">
<div class="section-head">
<h2>Latest articles</h2>
<a href="#" class="link-row">View all <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
</div>
<div class="grid">
<!-- Featured -->
<article class="card glass featured">
<div class="thumb" style="background:linear-gradient(135deg,#7c5cff,#22d3ee)">
<span class="cat">Design</span>
</div>
<div class="body">
<span class="meta">Featured · 8 min read</span>
<h3>The quiet power of small interactions</h3>
<p>Why micro-animations and tactile feedback shape how users emotionally bond with a product — and how to design them with restraint.</p>
<div class="author"><span class="av">SA</span><span><b>Saleh Almasri</b><i>May 28, 2026</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#f472b6,#fb7185)"><span class="cat">Engineering</span></div>
<div class="body">
<h3>Edge-first React: the new mental model</h3>
<p>Rethinking data loading and rendering for the edge era.</p>
<div class="author"><span class="av">JK</span><span><b>John Kim</b><i>May 26</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#34d399,#22d3ee)"><span class="cat">Product</span></div>
<div class="body">
<h3>Pricing pages that actually convert</h3>
<p>Patterns from 40 SaaS pricing pages that compound trust.</p>
<div class="author"><span class="av">EM</span><span><b>Emma Watson</b><i>May 24</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#fbbf24,#f97316)"><span class="cat">Design</span></div>
<div class="body">
<h3>Designing in OKLCH: a practical guide</h3>
<p>Why perceptual color spaces matter for modern UI.</p>
<div class="author"><span class="av">AS</span><span><b>Aisha S.</b><i>May 21</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)"><span class="cat">Tutorial</span></div>
<div class="body">
<h3>Glassmorphism without the glare</h3>
<p>Making frosted surfaces accessible and performant.</p>
<div class="author"><span class="av">LV</span><span><b>Liam V.</b><i>May 19</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#0ea5e9,#22d3ee)"><span class="cat">Interview</span></div>
<div class="body">
<h3>Inside the design system at Linear</h3>
<p>A conversation on tokens, taste, and team velocity.</p>
<div class="author"><span class="av">NP</span><span><b>Nora P.</b><i>May 16</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#ec4899,#8b5cf6)"><span class="cat">Engineering</span></div>
<div class="body">
<h3>Streaming SSR is finally usable</h3>
<p>How to ship faster pages without sacrificing UX.</p>
<div class="author"><span class="av">MR</span><span><b>Maya R.</b><i>May 14</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#10b981,#84cc16)"><span class="cat">Product</span></div>
<div class="body">
<h3>The onboarding mistake everyone makes</h3>
<p>Why your activation rate is lower than it should be.</p>
<div class="author"><span class="av">CR</span><span><b>Chris R.</b><i>May 12</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#f43f5e,#ec4899)"><span class="cat">Design</span></div>
<div class="body">
<h3>Typography for dense interfaces</h3>
<p>Choosing typefaces that survive at small sizes.</p>
<div class="author"><span class="av">YT</span><span><b>Yuki T.</b><i>May 9</i></span></div>
</div>
</article>
<article class="card glass">
<div class="thumb" style="background:linear-gradient(135deg,#a855f7,#6366f1)"><span class="cat">Tutorial</span></div>
<div class="body">
<h3>Building a search that feels instant</h3>
<p>Debouncing, prefetching, and the illusion of speed.</p>
<div class="author"><span class="av">DV</span><span><b>David V.</b><i>May 7</i></span></div>
</div>
</article>
</div>
<!-- Pagination -->
<nav class="pagination">
<button class="page-btn" aria-label="Previous">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">4</button>
<span class="page-ellipsis">…</span>
<button class="page-btn">12</button>
<button class="page-btn" aria-label="Next">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</nav>
</section>
<!-- Newsletter -->
<section class="container">
<div class="news glass">
<div>
<h3>Get the weekly digest</h3>
<p class="muted">One email every Sunday. Best essays, no spam.</p>
</div>
<form class="news-form" onsubmit="event.preventDefault();this.querySelector('button').textContent='Subscribed ✓'">
<input type="email" placeholder="your@email.com" required />
<button class="btn btn-primary">Subscribe</button>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="site-footer">
<div class="container foot-grid">
<div>
<a href="#" class="brand">
<span class="brand-mark">R</span>
<span class="brand-text">Rloop<span class="accent">UI</span></span>
</a>
<p class="muted small" style="margin-top:.75rem;max-width:280px">A journal on design, code, and craft. Made with care.</p>
</div>
<div>
<h4>Explore</h4>
<a href="#">Latest</a><a href="#">Topics</a><a href="#">Authors</a><a href="#">Archive</a>
</div>
<div>
<h4>Company</h4>
<a href="#">About</a><a href="#">Contact</a><a href="#">Press</a><a href="#">Careers</a>
</div>
<div>
<h4>Connect</h4>
<a href="#">Twitter</a><a href="#">GitHub</a><a href="#">RSS</a><a href="#">Newsletter</a>
</div>
</div>
<div class="container foot-bot">
<span class="muted small">© 2026 RloopUI. All rights reserved.</span>
<span class="muted small">Crafted with attention to detail.</span>
</div>
</footer>
</body>
</html>
rloop.dev/p/Pr-E45