mirror of
https://github.com/tiennm99/reigen.git
synced 2026-08-03 17:21:18 +00:00
tiennm99
b08b1bd7b2
Pushes to main now deploy to both hosts from the same commit, with a preview channel on pull requests. GitHub Pages stays canonical, so the page carries a rel="canonical" link and og:url keeps pointing there — otherwise two identical copies compete as duplicate content. Two corrections to what `firebase init` generated: - Exclude plans/** from hosting. "public": "." publishes the repo root, which would have served the internal working notes at reigen.web.app. Each host has its own exclusion mechanism, so a new directory of working files has to be excluded in both. - Drop the single-page-app catch-all rewrite. This site is one page of anchor links with no client-side router, so ** -> /index.html would return HTTP 200 with the full page for every missing path, hiding broken asset links from us and handing crawlers unlimited duplicate URLs. The service account lives in the FIREBASE_SERVICE_ACCOUNT_REIGEN repo secret; no credentials are committed.
860 lines
45 KiB
HTML
860 lines
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Reigen Arataka — Greatest Psychic of the 21st Century (Self-Proclaimed) | Fan Tribute</title>
|
|
<meta name="description" content="An unofficial fan tribute to Reigen Arataka of Mob Psycho 100: the con man with no psychic powers who turned out to be the best mentor in the series. Profile, origin, manga-vs-anime design, real skills vs. performed techniques, quotes and trivia.">
|
|
<meta name="author" content="tiennm99">
|
|
<meta name="theme-color" content="#0c0c11">
|
|
<meta name="color-scheme" content="dark">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Reigen Arataka — Fan Tribute">
|
|
<meta property="og:description" content="Unofficial fan page for Reigen Arataka of Mob Psycho 100. Zero psychic power. One hundred percent confidence.">
|
|
<meta property="og:url" content="https://tiennm99.github.io/reigen/">
|
|
<!-- This page deploys to two hosts: GitHub Pages (canonical) and Firebase
|
|
Hosting at reigen.web.app (mirror). The canonical link keeps search
|
|
engines from treating the two copies as duplicate content. -->
|
|
<link rel="canonical" href="https://tiennm99.github.io/reigen/">
|
|
<link rel="icon" href="./assets/favicon.svg" type="image/svg+xml">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400..700&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,400;1,6..72,500&display=swap">
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
<script>
|
|
/* Arms the scroll-reveal hidden state before first paint (avoids a flash of
|
|
already-visible content). Failsafe: if js/main.js never runs — blocked,
|
|
404, syntax error, CSP — the class is dropped again so nothing stays
|
|
invisible. With JavaScript disabled this script never runs at all and the
|
|
page renders fully visible by default. */
|
|
(function () {
|
|
var root = document.documentElement;
|
|
root.classList.add('js');
|
|
setTimeout(function () {
|
|
if (root.dataset.revealReady !== 'true') root.classList.remove('js');
|
|
}, 1200);
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<a class="skip-link" href="#main">Skip to content</a>
|
|
|
|
<!-- ==================================================================
|
|
Original hand-authored SVG. Decorative only, never announced.
|
|
#i-figure is this page's own stylised portrait of the character:
|
|
hand-plotted geometry, no traced or embedded official artwork.
|
|
Every fill reads a CSS custom property, so the same drawing can be
|
|
re-coloured for the manga and anime palettes further down the page.
|
|
================================================================== -->
|
|
<svg class="sprite" aria-hidden="true" focusable="false" width="0" height="0"><defs>
|
|
|
|
<pattern id="p-halftone" width="7" height="7" patternUnits="userSpaceOnUse">
|
|
<circle cx="3.5" cy="3.5" r="1.3" fill="var(--fig-skin-3)"/>
|
|
</pattern>
|
|
|
|
<linearGradient id="g-dotfade" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0" stop-color="#fff" stop-opacity="0"/>
|
|
<stop offset="1" stop-color="#fff" stop-opacity="1"/>
|
|
</linearGradient>
|
|
<mask id="m-dotfade" maskContentUnits="objectBoundingBox">
|
|
<rect x="0" y="0" width="1" height="1" fill="url(#g-dotfade)"/>
|
|
</mask>
|
|
|
|
<clipPath id="c-head">
|
|
<path d="M176 204C176 130 213 96 261 96C309 96 346 130 346 204C346 256 332 296 306 322C292 337 277 347 261 347C245 347 230 337 216 322C190 296 176 256 176 204Z"/>
|
|
</clipPath>
|
|
|
|
<symbol id="i-figure" viewBox="0 0 520 700">
|
|
<!-- Styles live inside the symbol so they are cloned into each <use>
|
|
shadow tree. Every fill reads an inherited custom property, which is
|
|
what makes the manga / anime recolour possible from one drawing. -->
|
|
<style>
|
|
/* Each var carries a literal fallback: `fill` inherits, so an undefined
|
|
custom property would otherwise resolve to the inherited value and
|
|
paint the shape solid black. */
|
|
.fg-jacket { fill: var(--fig-suit, #3b3b47); }
|
|
.fg-lapel { fill: var(--fig-suit-2, #26262f); }
|
|
.fg-shirt { fill: var(--fig-shirt, #ece7dd); }
|
|
.fg-collar { fill: var(--fig-shirt-2, #c8c2b5); }
|
|
.fg-tie { fill: var(--fig-tie, #ef5f96); }
|
|
.fg-tie2 { fill: var(--fig-tie-2, #c9265d); }
|
|
.fg-head, .fg-neck { fill: var(--fig-skin, #e8c69e); }
|
|
.fg-shade { fill: var(--fig-skin-2, #c69a6b); }
|
|
.fg-ear, .fg-shade2 { fill: var(--fig-skin-3, #a3763f); }
|
|
.fg-hair { fill: var(--fig-hair, #c9884a); }
|
|
.fg-hair2 { fill: var(--fig-hair-2, #e0aa72); }
|
|
.fg-face { fill: none; stroke: var(--fig-line, #47331f); stroke-width: 5;
|
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
</style>
|
|
<!-- torso: shoulders, open shirt, notch lapels, knotted tie -->
|
|
<path class="fg-jacket" d="M261 372c-54 8-107 27-146 56C69 462 44 546 34 700h454c-10-154-35-238-81-272-39-29-92-48-146-56Z"/>
|
|
<path class="fg-shirt" d="M212 396 261 372 310 396 296 508 261 552 226 508Z"/>
|
|
<path class="fg-collar" d="M212 396 259 378 252 428 227 456Z"/>
|
|
<path class="fg-collar" d="M310 396 263 378 270 428 295 456Z"/>
|
|
<path class="fg-tie" d="M247 400h28l9 30h-46Z"/>
|
|
<path class="fg-tie2" d="M241 432h40l9 150-29 52-29-52Z"/>
|
|
<path class="fg-lapel" d="M208 392 138 440 220 590 252 484Z"/>
|
|
<path class="fg-lapel" d="M314 392 384 440 302 590 270 484Z"/>
|
|
<!-- head: flat two-tone lighting, halftone band along the shadow edge -->
|
|
<path class="fg-ear" d="M180 206c-17-4-27 8-24 25 3 18 14 28 26 29Z"/>
|
|
<path class="fg-neck" d="M231 306h60v86h-60Z"/>
|
|
<path class="fg-shade2" d="M231 306h60v24c-16 13-44 13-60 0Z"/>
|
|
<path class="fg-head" d="M176 204C176 130 213 96 261 96C309 96 346 130 346 204C346 256 332 296 306 322C292 337 277 347 261 347C245 347 230 337 216 322C190 296 176 256 176 204Z"/>
|
|
<path class="fg-shade" clip-path="url(#c-head)" d="M290 56H446V366H244C268 300 285 226 290 56Z"/>
|
|
<!-- narrow halftone band hugging the shadow edge: comic-book shading -->
|
|
<rect class="fg-dots" clip-path="url(#c-head)" mask="url(#m-dotfade)" x="254" y="96" width="38" height="172" fill="url(#p-halftone)" opacity=".8"/>
|
|
<!-- Minimal features: a knowing squint and a salesman's half-smile. Four
|
|
hand-plotted strokes, no eyes drawn open, nothing traced. -->
|
|
<g class="fg-face">
|
|
<path d="M212 252c10 7 21 7 30 0"/>
|
|
<path d="M282 252c10 7 21 7 30 0"/>
|
|
<path d="M283 288c6 4 10 5 15 4"/>
|
|
<path d="M243 306c14 10 32 5 40-9"/>
|
|
</g>
|
|
<!-- messy side-swept bangs: saw-tooth fringe, part left of centre -->
|
|
<path class="fg-hair" d="M164 248C154 130 186 58 252 58C334 58 380 140 368 226L352 176L326 234L314 172L282 240L268 170L234 230L218 176L190 236Z"/>
|
|
<path class="fg-hair2" d="M196 150C210 106 232 78 264 72C232 90 210 118 202 156Z"/>
|
|
</symbol>
|
|
|
|
<symbol id="i-salt" viewBox="0 0 64 40">
|
|
<g fill="currentColor">
|
|
<circle cx="4" cy="30" r="3.2"/><circle cx="12" cy="24" r="2.4"/><circle cx="19" cy="31" r="1.6"/>
|
|
<circle cx="22" cy="17" r="3"/><circle cx="30" cy="24" r="1.9"/><circle cx="31" cy="10" r="2.2"/>
|
|
<circle cx="38" cy="18" r="1.4"/><circle cx="40" cy="29" r="2.6"/><circle cx="44" cy="8" r="1.7"/>
|
|
<circle cx="48" cy="21" r="2.9"/><circle cx="52" cy="33" r="1.5"/><circle cx="55" cy="13" r="2.1"/>
|
|
<circle cx="60" cy="26" r="1.3"/><circle cx="26" cy="36" r="1.2"/><circle cx="34" cy="4" r="1.1"/>
|
|
<circle cx="8" cy="14" r="1.5"/><circle cx="15" cy="6" r="1.2"/>
|
|
</g>
|
|
</symbol>
|
|
<symbol id="i-quote" viewBox="0 0 40 32">
|
|
<path fill="currentColor" d="M0 32V16.8C0 7.5 5.4 1.2 15 0l1.8 5.4C11.4 6.9 8.4 10 8.1 14.4H15V32H0Zm23.2 0V16.8C23.2 7.5 28.6 1.2 38.2 0L40 5.4c-5.4 1.5-8.4 4.6-8.7 9h6.9V32H23.2Z"/>
|
|
</symbol>
|
|
</defs></svg>
|
|
|
|
<header class="site-header" id="top">
|
|
<div class="site-header__inner">
|
|
<a class="brand" href="#top">
|
|
<span class="brand__mark" lang="ja" aria-hidden="true">霊</span>
|
|
<span class="brand__text">
|
|
<b>Reigen Arataka</b>
|
|
<small>unofficial fan tribute</small>
|
|
</span>
|
|
</a>
|
|
<nav class="site-nav" aria-label="Sections of this page">
|
|
<ul>
|
|
<li><a href="#profile">Profile</a></li>
|
|
<li><a href="#who" aria-label="Who He Is">Who</a></li>
|
|
<li><a href="#origin" aria-label="Origin Story">Origin</a></li>
|
|
<li><a href="#personality" aria-label="Personality Traits">Traits</a></li>
|
|
<li><a href="#look" aria-label="The Look">Look</a></li>
|
|
<li><a href="#abilities">Abilities</a></li>
|
|
<li><a href="#quotes">Quotes</a></li>
|
|
<li><a href="#people">People</a></li>
|
|
<li><a href="#arcs">Arcs</a></li>
|
|
<li><a href="#beyond" aria-label="Beyond the Series">Beyond</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<!-- Reading-position bar. CSS scroll-driven; absent where unsupported. -->
|
|
<div class="scroll-progress" aria-hidden="true"><span></span></div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
|
|
<!-- ===================== HERO ===================== -->
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="hero__art" aria-hidden="true">
|
|
<span class="aura aura--a"></span>
|
|
<span class="aura aura--b"></span>
|
|
<span class="aura aura--c"></span>
|
|
<svg class="rays" viewBox="0 0 400 400" focusable="false">
|
|
<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
|
<path d="M200 26v54M200 320v54M26 200h54M320 200h54"/>
|
|
<path d="M77 77l38 38M285 285l38 38M323 77l-38 38M115 285l-38 38" opacity=".7"/>
|
|
</g>
|
|
<circle cx="200" cy="200" r="150" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="2 10" opacity=".55"/>
|
|
<circle cx="200" cy="200" r="186" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="1 14" opacity=".35"/>
|
|
</svg>
|
|
<svg class="figure" viewBox="0 0 520 700" focusable="false">
|
|
<circle class="fg-halo" cx="261" cy="205" r="176"/>
|
|
<circle class="fg-ring" cx="261" cy="205" r="205"/>
|
|
<use href="#i-figure" width="520" height="700"></use>
|
|
</svg>
|
|
<svg class="hero__salt" viewBox="0 0 64 40" focusable="false"><use href="#i-salt"></use></svg>
|
|
</div>
|
|
|
|
<div class="hero__body">
|
|
<p class="kicker kicker--strike"><span>Self-proclaimed</span></p>
|
|
<h1 id="hero-title" class="hero__title">
|
|
<span>Reigen</span> <span>Arataka</span>
|
|
</h1>
|
|
<p class="hero__ja" lang="ja">霊幻新隆</p>
|
|
<p class="hero__claim">“The Greatest Psychic of the 21st Century”</p>
|
|
<p class="hero__tagline">
|
|
Zero psychic ability. A pocket full of salt, a very good massage,
|
|
and enough nerve to carry an entire exorcism business — and,
|
|
somehow, the most important adult in a psychic kid’s life.
|
|
</p>
|
|
|
|
<ul class="stat-chips">
|
|
<li><span class="stat-chips__k">Psychic power</span><span class="stat-chips__v stat-chips__v--zero">0%</span></li>
|
|
<li><span class="stat-chips__k">Confidence</span><span class="stat-chips__v">100%</span></li>
|
|
</ul>
|
|
|
|
<p class="hero__note">
|
|
Fan-made tribute page. Not affiliated with the creators of <cite>Mob Psycho 100</cite>.
|
|
All character artwork here — the portrait, the aura, the salt motifs — is
|
|
original CSS / SVG drawn for this page. The photographic backdrops are
|
|
CC0 / Unsplash-licensed stock textures, <a href="#credits">credited in the footer</a>.
|
|
No official <cite>Mob Psycho 100</cite> images are used.
|
|
</p>
|
|
</div>
|
|
|
|
<p class="scroll-cue" aria-hidden="true"><span></span>scroll</p>
|
|
</section>
|
|
|
|
<div class="salt-rule" aria-hidden="true"></div>
|
|
|
|
<!-- ===================== 01 PROFILE ===================== -->
|
|
<section id="profile" class="section" aria-labelledby="h-profile">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">01</p>
|
|
<h2 id="h-profile">Profile</h2>
|
|
<p class="section__lede">The paperwork behind the persona.</p>
|
|
</div>
|
|
|
|
<!-- Explicit ARIA roles: the narrow-screen layout restyles the table into
|
|
stacked rows, which would otherwise drop the implicit table semantics. -->
|
|
<div class="table-scroll" data-reveal>
|
|
<table class="data-table" role="table">
|
|
<caption class="visually-hidden">Identity and production details for Reigen Arataka</caption>
|
|
<tbody role="rowgroup">
|
|
<tr role="row"><th role="rowheader" scope="row">Name</th><td role="cell">Reigen Arataka <span class="t-ja" lang="ja">霊幻新隆</span></td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">Age</th><td role="cell">28–29 <span class="t-note">— sources differ</span></td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">Birthday</th><td role="cell">October 10</td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">Height</th><td role="cell">179 cm</td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">Occupation</th><td role="cell">Owner and operator, Spirits and Such Consultation Office</td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">Workplace</th><td role="cell">Spirits and Such Consultation Office — one small rented room</td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">Affiliations</th><td role="cell">Mentor and employer to Mob (Shigeo Kageyama); works alongside Katsuya Serizawa</td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">First appearance (manga)</th><td role="cell">Chapter 1</td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">First appearance (anime)</th><td role="cell">Season 1, Episode 1 — “Self-Proclaimed Psychic: Reigen Arataka ~And Mob~” (July 2016)</td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">Japanese voice</th><td role="cell">Takahiro Sakurai</td></tr>
|
|
<tr role="row"><th role="rowheader" scope="row">English voice</th><td role="cell">Chris Niosi</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<p class="fine-print fine-print--wide" data-reveal>
|
|
Age is given as 28 by the series wiki and as 29 by MyAnimeList, so both are shown rather
|
|
than one being picked. The height comes from MyAnimeList only; no second source was found
|
|
for it.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ===================== 02 WHO HE IS ===================== -->
|
|
<section id="who" class="section section--bleed section--who tex" aria-labelledby="h-who">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">02</p>
|
|
<h2 id="h-who">Who He Is</h2>
|
|
<p class="section__lede">A fraud, technically. A mentor, actually.</p>
|
|
</div>
|
|
|
|
<div class="prose" data-reveal>
|
|
<p class="prose__drop">
|
|
Reigen sells exorcisms he cannot perform. He has no psychic ability whatsoever — not a
|
|
flicker — and he has built a whole small business on the confident opposite claim.
|
|
His toolkit is salt, showmanship, a sharp read on people, and hands that genuinely know
|
|
where the knot in your shoulder is.
|
|
</p>
|
|
<p>
|
|
The joke is that his clients still leave better off. What they usually walk in with is
|
|
loneliness, stress, guilt or self-doubt, and Reigen — whatever he calls the ritual —
|
|
actually listens, gives blunt practical advice, and sends them home lighter. The fake part
|
|
is the ghost. The help is real.
|
|
</p>
|
|
<p>
|
|
Then a quiet middle-schooler named Shigeo Kageyama — Mob — walks in with powers
|
|
that could level a building, and asks the con man for guidance. Reigen hires him. The money
|
|
motive is obvious and he never quite pretends otherwise. But what he ends up giving Mob is
|
|
the one thing no esper in the series can supply: the steady, unglamorous message that
|
|
<em>power is not the point.</em>
|
|
</p>
|
|
<blockquote class="pull">
|
|
Psychic powers, he tells Mob, are just another trait — like being fast, or good at
|
|
exams. What makes a person worth something is how they treat people.
|
|
</blockquote>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 03 ORIGIN STORY ===================== -->
|
|
<section id="origin" class="section section--bleed section--origin tex" aria-labelledby="h-origin">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">03</p>
|
|
<h2 id="h-origin">Origin Story</h2>
|
|
<p class="section__lede">Before the office, there was a desk he could not stand.</p>
|
|
</div>
|
|
|
|
<div class="origin">
|
|
<div class="prose" data-reveal>
|
|
<p class="prose__drop">
|
|
He started out a salaryman at an ordinary company. Nothing paranormal, nothing spiritual
|
|
— regular work at a regular firm. He quit because he was bored, and because he
|
|
disliked the job.
|
|
</p>
|
|
<p>
|
|
Roughly four years before the story begins, he rented a small room and put a name on it:
|
|
Spirits and Such Consultation Office. There was no plan behind it. He took the room more
|
|
or less on impulse and started calling himself a psychic.
|
|
</p>
|
|
<p>
|
|
Then a middle-schooler turned up as a client, looking for help with powers he could not
|
|
switch off. Reigen — who has no powers at all — took the job.
|
|
</p>
|
|
<blockquote class="pull">
|
|
The business exists because a bored office worker walked out and rented a room. The most
|
|
consequential thing he ever did was answer the door to a kid he could not possibly help
|
|
in the way advertised.
|
|
</blockquote>
|
|
</div>
|
|
|
|
<div class="plaque" data-reveal>
|
|
<span class="plaque__mark" lang="ja" aria-hidden="true">霊</span>
|
|
<p class="plaque__name">Spirits and Such<br>Consultation Office</p>
|
|
<p class="plaque__meta">One rented room · no business plan · open about four years before the story starts</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 04 PERSONALITY ===================== -->
|
|
<section id="personality" class="section" aria-labelledby="h-personality">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">04</p>
|
|
<h2 id="h-personality">Personality</h2>
|
|
<p class="section__lede">Six traits, pulling in different directions at once.</p>
|
|
</div>
|
|
|
|
<ul class="trait-grid">
|
|
<li class="trait" data-reveal>
|
|
<h3>Con artist</h3>
|
|
<p>Charm, quick thinking and social footwork, deployed to convince paying clients that he is a powerful psychic.</p>
|
|
</li>
|
|
<li class="trait" data-reveal>
|
|
<h3>Emotionally intelligent</h3>
|
|
<p>Reads a room and a person fast, then adjusts his register to match. The same skill that makes him a good liar makes him a good counsellor.</p>
|
|
</li>
|
|
<li class="trait" data-reveal>
|
|
<h3>Outgoing performer</h3>
|
|
<p>Personable, verbally confident, entirely comfortable with an audience. Never met a silence he wouldn’t fill.</p>
|
|
</li>
|
|
<li class="trait" data-reveal>
|
|
<h3>Protective mentor</h3>
|
|
<p>Started from self-interest and ended up genuinely invested in Mob’s safety, self-esteem and growing up okay.</p>
|
|
</li>
|
|
<li class="trait" data-reveal>
|
|
<h3>Relentlessly pragmatic</h3>
|
|
<p>Aims at the real problem — the stress, the loneliness, the self-doubt — even while performing a supernatural solution to it.</p>
|
|
</li>
|
|
<li class="trait" data-reveal>
|
|
<h3>Flawed, with a floor</h3>
|
|
<p>Vain, evasive, allergic to accountability. Still refuses to truly hurt a client or exploit a child. He learns humility the hard way.</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- ===================== 05 THE LOOK ===================== -->
|
|
<section id="look" class="section section--bleed section--look" aria-labelledby="h-look">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">05</p>
|
|
<h2 id="h-look">The Look</h2>
|
|
<p class="section__lede">
|
|
The manga and the anime do not draw him the same way — and they do not quite write
|
|
him the same way either. Both figures below are this page’s own drawing, recoloured.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="compare">
|
|
<article class="ver ver--manga" data-reveal>
|
|
<p class="ver__tag">In the manga</p>
|
|
<div class="ver__art">
|
|
<svg class="ver__figure" viewBox="144 44 236 456" aria-hidden="true" focusable="false"><use href="#i-figure" width="520" height="700"></use></svg>
|
|
</div>
|
|
<h3>Brown hair, black tie</h3>
|
|
<ul class="swatches">
|
|
<!-- Swatches read the same custom properties that colour the figure
|
|
above, so a palette change can never desync the two. -->
|
|
<li><span class="sw" style="--sw:var(--fig-hair)"></span>Hair — brown</li>
|
|
<li><span class="sw" style="--sw:var(--fig-tie)"></span>Tie — black</li>
|
|
</ul>
|
|
<p class="ver__note">
|
|
Written more plainly as a manipulative con artist. The framing is more critical of him.
|
|
</p>
|
|
</article>
|
|
|
|
<p class="compare__vs" aria-hidden="true"><span>vs</span></p>
|
|
|
|
<article class="ver ver--anime" data-reveal>
|
|
<p class="ver__tag">In the anime</p>
|
|
<div class="ver__art">
|
|
<svg class="ver__figure ver__figure--flip" viewBox="144 44 236 456" aria-hidden="true" focusable="false"><use href="#i-figure" width="520" height="700"></use></svg>
|
|
</div>
|
|
<h3>Reddish-blond hair, pink tie</h3>
|
|
<ul class="swatches">
|
|
<li><span class="sw" style="--sw:var(--fig-hair)"></span>Hair — reddish-blond / golden</li>
|
|
<li><span class="sw" style="--sw:var(--fig-tie)"></span>Tie — pink</li>
|
|
</ul>
|
|
<p class="ver__note">
|
|
Warmer and more likeable. The bombast is toned down and the charm is pushed forward.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="shared" data-reveal>
|
|
<h3>Shared by both versions</h3>
|
|
<ul class="tag-list">
|
|
<li>Dark brown eyes</li>
|
|
<li>Dark grey business suit</li>
|
|
<li>Messy side-swept bangs</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== 06 ABILITIES ===================== -->
|
|
<section id="abilities" class="section section--abilities" aria-labelledby="h-abilities">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">06</p>
|
|
<h2 id="h-abilities">What He Can Actually Do</h2>
|
|
<p class="section__lede">
|
|
Left column: real, verifiable, unglamorous. Right column: the show.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="split">
|
|
<!-- REAL -->
|
|
<div class="panel panel--real" data-reveal>
|
|
<p class="panel__tag">Genuine</p>
|
|
<h3 class="panel__title">Real skills</h3>
|
|
<p class="panel__intro">
|
|
One entry below is canon: he has no psychic ability at all. The rest is
|
|
this fan page’s own read on how good he is at things — the
|
|
bars are a rough impression, not official stats.
|
|
</p>
|
|
<ul class="skill-list">
|
|
<li>
|
|
<div class="meter">
|
|
<p class="meter__head"><span class="meter__label">Massage & acupressure</span><span class="meter__val">Expert</span></p>
|
|
<span class="meter__track" aria-hidden="true"><span class="meter__fill" style="--pct:94%"></span></span>
|
|
</div>
|
|
<p class="skill-list__note">Real acupoint work on shoulder and back tension. The most-used ability he owns.</p>
|
|
</li>
|
|
<li>
|
|
<div class="meter">
|
|
<p class="meter__head"><span class="meter__label">Counselling & life advice</span><span class="meter__val">Expert</span></p>
|
|
<span class="meter__track" aria-hidden="true"><span class="meter__fill" style="--pct:90%"></span></span>
|
|
</div>
|
|
<p class="skill-list__note">Unlicensed, unbilled, and frequently the actual product being sold.</p>
|
|
</li>
|
|
<li>
|
|
<div class="meter">
|
|
<p class="meter__head"><span class="meter__label">Persuasion</span><span class="meter__val">Very high</span></p>
|
|
<span class="meter__track" aria-hidden="true"><span class="meter__fill" style="--pct:88%"></span></span>
|
|
</div>
|
|
<p class="skill-list__note">Talks his way into jobs, out of trouble, and around the truth.</p>
|
|
</li>
|
|
<li>
|
|
<div class="meter">
|
|
<p class="meter__head"><span class="meter__label">Physical fitness</span><span class="meter__val">Surprising</span></p>
|
|
<span class="meter__track" aria-hidden="true"><span class="meter__fill" style="--pct:72%"></span></span>
|
|
</div>
|
|
<p class="skill-list__note">No powers, but agile enough and smart enough about leverage to hold his own in a fight.</p>
|
|
</li>
|
|
<li>
|
|
<div class="meter meter--zero">
|
|
<p class="meter__head"><span class="meter__label">Psychic ability</span><span class="meter__val">None</span></p>
|
|
<span class="meter__track" aria-hidden="true"><span class="meter__fill" style="--pct:0%"></span></span>
|
|
</div>
|
|
<p class="skill-list__note">Zero. Not weak — absent. This is the one number on this page that is canon.</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- PERFORMED -->
|
|
<div class="panel panel--fake tex" data-reveal>
|
|
<p class="panel__tag">Theatre</p>
|
|
<h3 class="panel__title">“Techniques”</h3>
|
|
<p class="panel__intro">Branded, named, and announced at volume. All of it is stagecraft for the client’s benefit.</p>
|
|
<ul class="tech-list">
|
|
<li class="tech">
|
|
<svg class="tech__icon" aria-hidden="true" focusable="false"><use href="#i-salt"></use></svg>
|
|
<h4>Salt Splash</h4>
|
|
<p>Throw salt at the target while shouting an incantation. Purification, allegedly.</p>
|
|
</li>
|
|
<li class="tech">
|
|
<svg class="tech__icon" aria-hidden="true" focusable="false"><use href="#i-salt"></use></svg>
|
|
<h4>Salt Heap Punch</h4>
|
|
<p>A punch, thrown with a salt-encrusted fist, for maximum visual drama.</p>
|
|
</li>
|
|
<li class="tech">
|
|
<svg class="tech__icon" aria-hidden="true" focusable="false"><use href="#i-salt"></use></svg>
|
|
<h4>Black Arts Crush</h4>
|
|
<p>A frightening name applied to what is, in fact, a very competent massage.</p>
|
|
</li>
|
|
<li class="tech">
|
|
<svg class="tech__icon" aria-hidden="true" focusable="false"><use href="#i-salt"></use></svg>
|
|
<h4>Graphic Purification</h4>
|
|
<p>Editing the evil spirit out of the client’s photograph. On a computer. That is the whole technique.</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="punchline" data-reveal>
|
|
Nothing in the right column works.
|
|
Everything in the left column does.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ===================== 07 QUOTES ===================== -->
|
|
<section id="quotes" class="section section--bleed section--quotes tex" aria-labelledby="h-quotes">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">07</p>
|
|
<h2 id="h-quotes">In His Own Words</h2>
|
|
<p class="section__lede">The fraud gives the best advice in the series.</p>
|
|
</div>
|
|
|
|
<div class="quote-stack">
|
|
<figure class="quote quote--lead" data-reveal>
|
|
<svg class="quote__glyph" aria-hidden="true" focusable="false"><use href="#i-quote"></use></svg>
|
|
<blockquote>
|
|
<p>Listen. Just because you have these psychic powers and abilities, it doesn’t mean
|
|
you’re any less of a human than anyone else. There are people who are fast, people who
|
|
are book smart, and people with strong body odor. Psychic powers are just like that:
|
|
another characteristic.</p>
|
|
</blockquote>
|
|
</figure>
|
|
|
|
<figure class="quote" data-reveal>
|
|
<svg class="quote__glyph" aria-hidden="true" focusable="false"><use href="#i-quote"></use></svg>
|
|
<blockquote><p>Being confident about your powers is fine, but you mustn’t get conceited.
|
|
Depending on how we use our powers, they can also be deadly weapons. They’re just like
|
|
knives.</p></blockquote>
|
|
</figure>
|
|
|
|
<figure class="quote" data-reveal>
|
|
<svg class="quote__glyph" aria-hidden="true" focusable="false"><use href="#i-quote"></use></svg>
|
|
<blockquote><p>In the end, you’re the one who’s going to get hurt. When things go
|
|
south, it’s ok to run away and save yourself!</p></blockquote>
|
|
</figure>
|
|
|
|
<!-- Deliberate diptych: the same idea, said twice, years apart. -->
|
|
<figure class="quote quote--pair" data-reveal>
|
|
<svg class="quote__glyph" aria-hidden="true" focusable="false"><use href="#i-quote"></use></svg>
|
|
<blockquote><p>Your life is your own, and it’s up to you to live it exactly the way you
|
|
want.</p></blockquote>
|
|
</figure>
|
|
|
|
<figure class="quote quote--pair" data-reveal>
|
|
<svg class="quote__glyph" aria-hidden="true" focusable="false"><use href="#i-quote"></use></svg>
|
|
<blockquote><p>Your life is your own. It’s okay to run away!</p></blockquote>
|
|
</figure>
|
|
|
|
<figure class="quote quote--short" data-reveal>
|
|
<svg class="quote__glyph" aria-hidden="true" focusable="false"><use href="#i-quote"></use></svg>
|
|
<blockquote><p>The truth behind one’s charm is kindness.</p></blockquote>
|
|
</figure>
|
|
</div>
|
|
|
|
<p class="fine-print fine-print--wide" data-reveal>
|
|
Wording follows the English translations that circulate most widely. Public sources do not
|
|
pin these lines to specific episodes or chapters, so no citation is given rather than a
|
|
guessed one. Phrasing varies between subtitle and dub versions.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ===================== 08 PEOPLE ===================== -->
|
|
<section id="people" class="section" aria-labelledby="h-people">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">08</p>
|
|
<h2 id="h-people">The People Around Him</h2>
|
|
<p class="section__lede">One office, several strays.</p>
|
|
</div>
|
|
|
|
<ul class="rel-list">
|
|
<li class="rel rel--primary" data-reveal>
|
|
<p class="rel__role">Employee · mentee · chosen family</p>
|
|
<h3>Mob <span class="rel__alt">Shigeo Kageyama</span></h3>
|
|
<p>The genuine psychic who works for the fake one. Reigen’s motive slides from
|
|
“useful asset” to “this kid has to turn out okay,” and that shift is
|
|
the spine of his whole character.</p>
|
|
</li>
|
|
<li class="rel" data-reveal>
|
|
<p class="rel__role">Colleague · deputy director</p>
|
|
<h3>Katsuya Serizawa</h3>
|
|
<p>Hired during the rebuild and made deputy director of the office. Reigen cut his hair
|
|
himself — a small nudge toward standing on his own. The habitual
|
|
“Right, Serizawa?” is Reigen fishing for backup.</p>
|
|
</li>
|
|
<li class="rel" data-reveal>
|
|
<p class="rel__role">Uninvited</p>
|
|
<h3>Dimple</h3>
|
|
<p>An evil spirit who tried to make Reigen his puppet. Reigen’s countermeasure was to
|
|
pretend he could not see him. Their dynamic stays comedic friction, never alliance.</p>
|
|
</li>
|
|
<li class="rel" data-reveal>
|
|
<p class="rel__role">Mob’s brother</p>
|
|
<h3>Ritsu Kageyama</h3>
|
|
<p>Reigen occasionally goes to him for help or an opinion, and — notably — treats
|
|
him as an equal while doing it.</p>
|
|
</li>
|
|
<li class="rel" data-reveal>
|
|
<p class="rel__role">Rival, then not</p>
|
|
<h3>Teruki Hanazawa</h3>
|
|
<p>A genuinely powerful esper who starts out clashing with Reigen and ends up respecting the
|
|
man for the one thing he has that powers can’t buy.</p>
|
|
</li>
|
|
<li class="rel" data-reveal>
|
|
<p class="rel__role">Never actually hired</p>
|
|
<h3>Tome Kurata</h3>
|
|
<p>She was never taken on. She installed herself as unpaid secretary and simply kept turning
|
|
up until it counted as a job. By the end the two of them needle each other like colleagues.</p>
|
|
</li>
|
|
<li class="rel" data-reveal>
|
|
<p class="rel__role">Client</p>
|
|
<h3>Tsubomi Takane</h3>
|
|
<p>Came to the office as a client with a friend and tested his credibility with a trick
|
|
question. Reigen spotted Mob’s photo on his own “satisfied customers” board
|
|
during the visit. No romantic angle on his side — he simply respected what she meant
|
|
to Mob.</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- ===================== 09 ARCS ===================== -->
|
|
<section id="arcs" class="section section--bleed section--arcs tex" aria-labelledby="h-arcs">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">09</p>
|
|
<h2 id="h-arcs">Story Arcs</h2>
|
|
<p class="section__lede">
|
|
The first two are spoiler-free. Everything after is folded away — open only what you
|
|
want to know.
|
|
</p>
|
|
</div>
|
|
|
|
<ol class="timeline">
|
|
<li class="arc" data-reveal>
|
|
<p class="arc__when">Opening</p>
|
|
<h3>Introduction</h3>
|
|
<p>Reigen meets Mob. The con-artist premise and the Spirits and Such office are laid out,
|
|
and the mentor–apprentice arrangement that carries the series begins.</p>
|
|
</li>
|
|
|
|
<li class="arc" data-reveal>
|
|
<p class="arc__when">Mid-series</p>
|
|
<h3>Business as usual</h3>
|
|
<p>A run of client jobs and staged exorcisms. Reigen keeps the fraud running while getting
|
|
steadily closer to Mob, tries his hand at expanding the business, and performs his named
|
|
“techniques” with total conviction.</p>
|
|
</li>
|
|
|
|
<li class="arc arc--spoiler" data-reveal>
|
|
<details class="spoiler">
|
|
<summary>
|
|
<span class="spoiler__badge">Spoilers</span>
|
|
<span class="spoiler__label">Later arc — the turn</span>
|
|
</summary>
|
|
<div class="spoiler__body">
|
|
<p class="arc__when">Separation</p>
|
|
<h3>Rock bottom</h3>
|
|
<p>A public scandal and an online pile-on drive Reigen and Mob apart — the split
|
|
following Reigen being dismissive about Mob’s social life. The press and public
|
|
opinion turn on him and he ends up isolated and out of work. Stripped of the act, he has
|
|
to look at how hollow his life had become without the kid in it, and how much of it he
|
|
had been outsourcing to a fourteen-year-old.</p>
|
|
<p>Second season episodes six and seven are widely treated as <em>his</em> arc
|
|
specifically rather than Mob’s.</p>
|
|
</div>
|
|
</details>
|
|
</li>
|
|
|
|
<li class="arc arc--spoiler" data-reveal>
|
|
<details class="spoiler">
|
|
<summary>
|
|
<span class="spoiler__badge">Spoilers</span>
|
|
<span class="spoiler__label">Later arc — the rebuild</span>
|
|
</summary>
|
|
<div class="spoiler__body">
|
|
<p class="arc__when">Reunion & rebuild</p>
|
|
<h3>Doing it properly</h3>
|
|
<p>Reigen and Mob reconcile. He reassesses how he has been living, brings Serizawa in as
|
|
a stabilising presence, and puts Spirits and Such back together on healthier terms
|
|
— choosing actual self-improvement over another, better lie. Still a bad boss.
|
|
Visibly a caring one.</p>
|
|
</div>
|
|
</details>
|
|
</li>
|
|
|
|
<li class="arc arc--spoiler" data-reveal>
|
|
<details class="spoiler">
|
|
<summary>
|
|
<span class="spoiler__badge">Spoilers</span>
|
|
<span class="spoiler__label">Finale — where he lands</span>
|
|
</summary>
|
|
<div class="spoiler__body">
|
|
<p class="arc__when">Finale</p>
|
|
<h3>The measure of him</h3>
|
|
<p>In the climactic confrontation Reigen is support, not spectacle. While fused with
|
|
Mob’s power he briefly gains the ability to see spirits — borrowed, and
|
|
temporary. He never acquires a power of his own. His arc resolves instead into something
|
|
rarer in this genre: a stable, caring adult that Mob can actually rely on.</p>
|
|
</div>
|
|
</details>
|
|
</li>
|
|
</ol>
|
|
|
|
<p class="fine-print fine-print--wide" data-reveal>
|
|
Arcs are listed in order of occurrence. Chapter ranges are not given, and the only episode
|
|
range stated is the one sources agree on — season two, episodes six and seven.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ===================== 10 BEYOND THE SERIES ===================== -->
|
|
<section id="beyond" class="section section--bleed section--beyond tex" aria-labelledby="h-beyond">
|
|
<div class="section__head" data-reveal>
|
|
<p class="section__num" aria-hidden="true">10</p>
|
|
<h2 id="h-beyond">Beyond The Series</h2>
|
|
<p class="section__lede">Three things that happened outside the story itself.</p>
|
|
</div>
|
|
|
|
<ul class="notes">
|
|
<li class="note" data-reveal>
|
|
<p class="note__tag">Spin-off</p>
|
|
<h3>He got a manga of his own</h3>
|
|
<p><cite>Reigen: The Man With a MAX Spirituality Level of 131</cite> — a one-volume
|
|
anthology of short horror-comedy stories built around him. It ran on the MangaONE app from
|
|
19 March 2018, and Dark Horse Comics released the English edition on
|
|
15 December 2020.</p>
|
|
</li>
|
|
<li class="note" data-reveal>
|
|
<p class="note__tag">Fandom</p>
|
|
<h3>The most-favourited character</h3>
|
|
<p>On MyAnimeList he is the most-favourited character in <cite>Mob Psycho 100</cite> —
|
|
ahead of Mob himself. No count is printed here on purpose: the number moves constantly, and
|
|
anything committed to this page would be stale within the week.</p>
|
|
</li>
|
|
<li class="note" data-reveal>
|
|
<p class="note__tag">Voice</p>
|
|
<h3>The actor behind the bluster</h3>
|
|
<p>Takahiro Sakurai, who voices him in Japanese, is a heavily awarded performer — the
|
|
Overseas Fans Award at the 6th Seiyu Awards in 2012 and the Personality Award at the 16th in
|
|
2022, among others. Those awards belong to the actor, not to the character.</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<div class="salt-rule" aria-hidden="true"></div>
|
|
|
|
<footer class="site-footer tex">
|
|
<div class="site-footer__inner">
|
|
<section class="disclaimer" aria-labelledby="h-disclaimer">
|
|
<h2 id="h-disclaimer">Disclaimer</h2>
|
|
<p>
|
|
This is an <strong>unofficial, fan-made, non-commercial tribute page</strong>. It is not
|
|
affiliated with, authorised by, licensed by or endorsed by the rights holders of
|
|
<cite>Mob Psycho 100</cite>.
|
|
</p>
|
|
<p>
|
|
<cite>Mob Psycho 100</cite>, Reigen Arataka and all related characters and elements are the
|
|
property of <strong>ONE</strong>, <strong>Shogakukan</strong> and <strong>studio Bones</strong>.
|
|
All rights in the series belong to them.
|
|
</p>
|
|
<p>
|
|
<strong>No official artwork, screenshots, character images or logos are used anywhere on
|
|
this page.</strong> Every depiction of the character — the portrait, the recoloured
|
|
manga and anime figures, the aura, the salt motifs, the meters — is original CSS and
|
|
SVG drawn by hand for this page, and is a loose interpretation rather than a copy of any
|
|
official design.
|
|
</p>
|
|
<p>
|
|
The page also uses three <strong>photographic stock textures</strong> as low-opacity
|
|
backdrops — paper grain, a night skyline and an abstract bokeh field. They
|
|
are licensed under CC0 or the Unsplash License, contain nothing from the series, and are
|
|
credited individually under <a href="#credits">Image credits</a>.
|
|
Quotations are short excerpts included for commentary and identification.
|
|
</p>
|
|
<p>
|
|
If you hold rights in the series and have any concern about this page, please get in touch
|
|
via <a href="https://github.com/tiennm99" rel="noopener">github.com/tiennm99</a> and it will
|
|
be amended or taken down.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="sources" aria-labelledby="h-sources">
|
|
<h2 id="h-sources">Fact sources</h2>
|
|
<p class="sources__intro">Details on this page were compiled from:</p>
|
|
<ul>
|
|
<li><a href="https://mob-psycho-100.fandom.com/wiki/Arataka_Reigen" rel="noopener nofollow">Mob Psycho 100 Wiki — Arataka Reigen</a></li>
|
|
<li><a href="https://myanimelist.net/character/109931" rel="noopener nofollow">MyAnimeList — Arataka Reigen (age, height, birthday)</a></li>
|
|
<li><a href="https://mob-psycho-100.fandom.com/wiki/Reigen_(series)" rel="noopener nofollow">Mob Psycho 100 Wiki — the <cite>Reigen</cite> spin-off manga</a></li>
|
|
<li><a href="https://gamerant.com/mob-psycho-100-who-is-reigen/" rel="noopener nofollow">GameRant — Who is Arataka Reigen?</a></li>
|
|
<li><a href="https://gamerant.com/mob-psycho-100-main-characters-age-height-birthday/" rel="noopener nofollow">GameRant — Main characters’ age, height & birthday</a></li>
|
|
<li><a href="https://www.behindthevoiceactors.com/tv-shows/Mob-Psycho-100/" rel="noopener nofollow">Behind The Voice Actors — Mob Psycho 100 cast</a></li>
|
|
<li><a href="https://en.wikipedia.org/wiki/Takahiro_Sakurai" rel="noopener nofollow">Wikipedia — Takahiro Sakurai</a></li>
|
|
<li><a href="https://www.imdb.com/title/tt6014452/" rel="noopener nofollow">IMDb — Episode 1, “Self-Proclaimed Psychic: Reigen Arataka ~And Mob~”</a></li>
|
|
<li><a href="https://collider.com/why-we-love-mob-psycho-100-reigen-arataka/" rel="noopener nofollow">Collider — Why we love Reigen Arataka</a></li>
|
|
<li><a href="https://www.cbr.com/mob-psycho-100-reigen-arataka-life-lessons/" rel="noopener nofollow">CBR — Life lessons from Reigen Arataka</a></li>
|
|
<li><a href="https://otakukart.com/best-quotes-by-reigen-arataka-from-mob-psycho-100/" rel="noopener nofollow">OtakuKart — Best Reigen Arataka quotes</a></li>
|
|
</ul>
|
|
<p class="fine-print">
|
|
Claims that sources disagreed on were shown as disputed rather than resolved, and claims
|
|
that could not be verified were left off this page rather than published as fact.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="credits" id="credits" aria-labelledby="h-credits">
|
|
<h2 id="h-credits">Image credits</h2>
|
|
<p class="sources__intro">
|
|
The three photographic textures used as section backdrops. Nothing here depicts the series.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<span class="credits__what">Aged paper</span>
|
|
<span class="credits__who">“Paper002 4K Color” by <a href="https://ambientcg.com" rel="noopener nofollow">ambientCG (Lennart Demes)</a> ·
|
|
<a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="noopener nofollow">CC0 1.0</a> ·
|
|
<a href="https://commons.wikimedia.org/wiki/File:Paper002_4K_Color.jpg" rel="noopener nofollow">source</a></span>
|
|
</li>
|
|
<li>
|
|
<span class="credits__what">Night skyline</span>
|
|
<span class="credits__who">by <a href="https://unsplash.com/@theordinarymoments" rel="noopener nofollow">The Ordinary Moments</a> ·
|
|
<a href="https://unsplash.com/license" rel="noopener nofollow">Unsplash License</a> ·
|
|
<a href="https://unsplash.com/photos/city-skyline-illuminated-at-night-with-a-dark-blue-sky-1G7oszlOqcM" rel="noopener nofollow">source</a></span>
|
|
</li>
|
|
<li>
|
|
<span class="credits__what">Bokeh & dust</span>
|
|
<span class="credits__who">by <a href="https://unsplash.com/@ranamia" rel="noopener nofollow">Rana Mia</a> ·
|
|
<a href="https://unsplash.com/license" rel="noopener nofollow">Unsplash License</a> ·
|
|
<a href="https://unsplash.com/photos/abstract-bokeh-lights-and-dust-particles-Lh9Jqm2-z7Y" rel="noopener nofollow">source</a></span>
|
|
</li>
|
|
</ul>
|
|
<p class="fine-print">
|
|
All three were downscaled and recompressed for this page, then composited at low opacity
|
|
behind the layout. The paper tile is greyscale and keeps only the fine detail of its
|
|
original — the flat tone was subtracted, so what remains is grain that can actually be
|
|
seen on a near-black page. The skyline and bokeh fields are used as photographs,
|
|
desaturated in CSS.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
|
|
<p class="site-footer__base">
|
|
<span lang="ja" aria-hidden="true">霊</span>
|
|
Built as a fan tribute · static HTML, CSS and a little JavaScript ·
|
|
<a href="https://github.com/tiennm99" rel="noopener">github.com/tiennm99</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<script type="module" src="./js/main.js"></script>
|
|
</body>
|
|
</html>
|