hermes-playground/daemon-decider
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
daemon-decider/index.html
T

971 lines
49 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What Daemon Are You? — His Dark Materials</title>
<meta name="description" content="Discover what animal your daemon would take in Philip Pullman's His Dark Materials.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
--gold: #d4a843;
--gold-light: #f0d078;
--gold-dim: #8a6d2b;
--deep-blue: #0a0e1a;
--midnight: #0d1225;
--ice: #c8d8f0;
--ice-dim: #7a8ea8;
--aurora-green: #40c8a0;
--aurora-purple: #7b5ea7;
--aurora-blue: #4a7ab5;
--text: #e0dcd4;
--text-dim: #9a958c;
--card-bg: rgba(13, 18, 37, 0.85);
--card-border: rgba(212, 168, 67, 0.2);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Cormorant Garamond', 'Georgia', serif;
background: var(--deep-blue);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
line-height: 1.6;
}
/* === GOLDEN DUST CANVAS === */
#dust-canvas {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
}
/* === AURORA BACKGROUND === */
.aurora {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 120% 40% at 20% 10%, rgba(64,200,160,0.07) 0%, transparent 70%),
radial-gradient(ellipse 100% 50% at 80% 5%, rgba(74,122,181,0.06) 0%, transparent 70%),
radial-gradient(ellipse 80% 30% at 50% 15%, rgba(123,94,167,0.05) 0%, transparent 70%);
animation: aurora-drift 20s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
0% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-2%) translateY(3%); }
100% { transform: translateX(1%) translateY(-2%); }
}
/* === STARS === */
.stars {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
}
.star {
position: absolute;
width: 2px; height: 2px;
background: #fff;
border-radius: 50%;
animation: twinkle var(--dur) ease-in-out infinite alternate;
}
@keyframes twinkle {
0% { opacity: 0.1; transform: scale(0.8); }
100% { opacity: var(--max-o); transform: scale(1.2); }
}
/* === MAIN LAYOUT === */
.page-wrapper {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1.5rem 4rem;
}
/* === HEADER === */
.site-header {
text-align: center;
margin-bottom: 2.5rem;
}
.site-header h1 {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: clamp(1.8rem, 5vw, 3rem);
color: var(--gold);
text-shadow:
0 0 30px rgba(212,168,67,0.3),
0 0 60px rgba(212,168,67,0.1);
letter-spacing: 0.08em;
margin-bottom: 0.4rem;
}
.site-header .subtitle {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: clamp(0.95rem, 2.5vw, 1.2rem);
color: var(--ice-dim);
letter-spacing: 0.03em;
}
/* === INTRO SECTION === */
#intro {
max-width: 640px;
text-align: center;
animation: fadeInUp 1s ease-out;
}
#intro p {
font-size: clamp(1rem, 2.2vw, 1.15rem);
color: var(--text);
margin-bottom: 1.2rem;
line-height: 1.75;
}
#intro .lore {
font-style: italic;
color: var(--ice-dim);
border-left: 2px solid var(--gold-dim);
padding: 0.8rem 0 0.8rem 1.2rem;
margin: 1.5rem 0;
text-align: left;
}
/* === BUTTONS === */
.btn-primary {
display: inline-block;
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: 1.1rem;
color: var(--deep-blue);
background: linear-gradient(135deg, var(--gold-light), var(--gold));
border: none;
padding: 0.85rem 2.5rem;
border-radius: 4px;
cursor: pointer;
letter-spacing: 0.06em;
transition: all 0.3s ease;
text-transform: uppercase;
box-shadow: 0 2px 20px rgba(212,168,67,0.25);
margin-top: 1rem;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 30px rgba(212,168,67,0.4);
background: linear-gradient(135deg, #f5d888, var(--gold-light));
}
.btn-primary:active {
transform: translateY(0);
}
/* === QUESTION CARD === */
#quiz-container {
max-width: 680px;
width: 100%;
display: none;
}
.question-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 2rem;
backdrop-filter: blur(12px);
box-shadow: 0 4px 40px rgba(0,0,0,0.4);
animation: fadeInUp 0.5s ease-out;
}
.progress-bar {
width: 100%;
height: 3px;
background: rgba(212,168,67,0.15);
border-radius: 2px;
margin-bottom: 1.5rem;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--aurora-green), var(--gold));
border-radius: 2px;
transition: width 0.5s ease;
}
.question-number {
font-family: 'Cinzel', serif;
font-size: 0.8rem;
color: var(--gold-dim);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 0.6rem;
}
.question-text {
font-family: 'Cinzel', serif;
font-size: clamp(1.1rem, 2.8vw, 1.35rem);
font-weight: 600;
color: var(--ice);
margin-bottom: 1.5rem;
line-height: 1.5;
}
/* === ANSWER OPTIONS === */
.options-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.option-btn {
display: flex;
align-items: center;
gap: 0.8rem;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(0.95rem, 2vw, 1.08rem);
color: var(--text);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(212,168,67,0.12);
border-radius: 6px;
padding: 0.85rem 1.2rem;
cursor: pointer;
transition: all 0.25s ease;
text-align: left;
line-height: 1.5;
}
.option-btn:hover {
background: rgba(212,168,67,0.08);
border-color: rgba(212,168,67,0.35);
transform: translateX(4px);
}
.option-btn:active {
transform: translateX(2px) scale(0.99);
}
.option-letter {
flex-shrink: 0;
width: 28px; height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 0.8rem;
color: var(--gold);
border: 1px solid var(--gold-dim);
border-radius: 50%;
transition: all 0.25s ease;
}
.option-btn:hover .option-letter {
background: var(--gold);
color: var(--deep-blue);
}
/* === RESULT === */
#result-container {
max-width: 640px;
width: 100%;
display: none;
text-align: center;
animation: fadeInUp 0.8s ease-out;
}
.result-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 2.5rem 2rem;
backdrop-filter: blur(12px);
box-shadow: 0 4px 40px rgba(0,0,0,0.4);
}
.result-icon {
font-size: 4rem;
margin-bottom: 0.5rem;
filter: drop-shadow(0 0 20px rgba(212,168,67,0.4));
animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
0%,100% { filter: drop-shadow(0 0 20px rgba(212,168,67,0.3)); }
50% { filter: drop-shadow(0 0 35px rgba(212,168,67,0.6)); }
}
.result-label {
font-family: 'Cinzel', serif;
font-size: 0.8rem;
color: var(--gold-dim);
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 0.3rem;
}
.result-animal {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: clamp(2rem, 6vw, 3rem);
color: var(--gold);
text-shadow: 0 0 30px rgba(212,168,67,0.3);
margin-bottom: 0.3rem;
}
.result-latin {
font-style: italic;
color: var(--ice-dim);
font-size: 1rem;
margin-bottom: 1.5rem;
}
.result-description {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text);
margin-bottom: 1.5rem;
text-align: left;
}
.result-quote {
font-style: italic;
color: var(--ice-dim);
border-left: 2px solid var(--gold-dim);
padding: 0.8rem 0 0.8rem 1.2rem;
margin: 1.5rem 0;
text-align: left;
font-size: 0.95rem;
}
.traits-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.trait-tag {
font-family: 'Cinzel', serif;
font-size: 0.75rem;
color: var(--gold);
background: rgba(212,168,67,0.08);
border: 1px solid rgba(212,168,67,0.2);
border-radius: 20px;
padding: 0.3rem 0.9rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* === FOOTER === */
.site-footer {
margin-top: 3rem;
text-align: center;
font-size: 0.8rem;
color: var(--text-dim);
}
.site-footer a {
color: var(--gold-dim);
text-decoration: none;
}
/* === ANIMATIONS === */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* === RESPONSIVE === */
@media (max-width: 500px) {
.question-card, .result-card {
padding: 1.5rem 1.2rem;
}
.option-btn {
padding: 0.7rem 1rem;
}
}
</style>
</head>
<body>
<div class="aurora"></div>
<div class="stars" id="stars"></div>
<canvas id="dust-canvas"></canvas>
<div class="page-wrapper">
<header class="site-header">
<h1>What Daemon Are You?</h1>
<p class="subtitle">A His Dark Materials Divination</p>
</header>
<!-- INTRO -->
<section id="intro">
<p>In the world of <em>His Dark Materials</em>, every person has a <strong>daemon</strong> — the external form of their soul, a familiar spirit that shifts in shape through childhood before settling into one animal form upon reaching adulthood.</p>
<p>The form your daemon takes reveals the truest nature of your character. Answer these eight questions honestly, and the alethiometry of this test will reveal what your daemon would become.</p>
<div class="lore">
"The daemon is the external part of the soul. As the soul changes and grows and develops, it expresses itself to itself through the shape of the daemon."
</div>
<p>Answer carefully — your daemon is <em>you</em>.</p>
<button class="btn-primary" id="btn-start">Begin the Divination</button>
</section>
<!-- QUIZ -->
<div id="quiz-container">
<div class="question-card" id="question-card">
<div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
<div class="question-number" id="question-number"></div>
<div class="question-text" id="question-text"></div>
<div class="options-list" id="options-list"></div>
</div>
</div>
<!-- RESULT -->
<div id="result-container">
<div class="result-card">
<div class="result-icon" id="result-icon"></div>
<div class="result-label">Your daemon takes the form of</div>
<div class="result-animal" id="result-animal"></div>
<div class="result-latin" id="result-latin"></div>
<div class="traits-list" id="traits-list"></div>
<div class="result-description" id="result-description"></div>
<div class="result-quote" id="result-quote"></div>
<button class="btn-primary" id="btn-retry">Take the Divination Again</button>
</div>
</div>
<footer class="site-footer">
<p>Inspired by <em>His Dark Materials</em> by Philip Pullman. All characters belong to their rightful owners.</p>
</footer>
</div>
<script>
(function() {
"use strict";
// === QUESTIONS ===
// Each question has 4 options. Each option maps to a set of traits.
// Trait axes: ADVENTUROUS, ANALYTICAL, SOCIABLE, CREATIVE, IMPULSIVE, LOYAL, PLAYFUL, LEADERSHIP
var questions = [
{
text: "You find yourself standing at the edge of an uncharted forest. The trees whisper of ancient secrets within. What do you do?",
options: [
{ text: "Step in without hesitation — the unknown is where meaning is found.", traits: { ADVENTUROUS: 3, IMPULSIVE: 1 } },
{ text: "Study the forest's edge carefully before deciding — knowledge precedes action.", traits: { ANALYTICAL: 3, IMPULSIVE: -1 } },
{ text: "Call out to see if anyone else wishes to explore together.", traits: { SOCIABLE: 3, LOYAL: 1 } },
{ text: "Sketch the boundary in your mind — this place deserves to be remembered.", traits: { CREATIVE: 3, ANALYTICAL: 1 } }
]
},
{
text: "A close friend is in trouble, but helping them means crossing into dangerous territory. How do you respond?",
options: [
{ text: "Without question — loyalty demands I go where they need me.", traits: { LOYAL: 3, ADVENTUROUS: 1 } },
{ text: "I weigh the risks carefully, then plot the safest route.", traits: { ANALYTICAL: 3, LEADERSHIP: 1 } },
{ text: "I rally others to go with us — strength in numbers.", traits: { SOCIABLE: 2, LEADERSHIP: 2 } },
{ text: "I find an unconventional path — there's always another way.", traits: { CREATIVE: 2, ADVENTUROUS: 2 } }
]
},
{
text: "You discover a powerful truth about the world that most people would find disturbing. What do you do?",
options: [
{ text: "Speak it aloud, regardless of consequences. Truth must be told.", traits: { LEADERSHIP: 3, IMPULSIVE: 1 } },
{ text: "Study it deeper before acting — incomplete understanding is dangerous.", traits: { ANALYTICAL: 3, IMPULSIVE: -1 } },
{ text: "Share it gently with those who are ready to hear.", traits: { SOCIABLE: 2, LOYAL: 2 } },
{ text: "Find a way to encode the truth in art or story — let people discover it themselves.", traits: { CREATIVE: 3, SOCIABLE: 1 } }
]
},
{
text: "You are offered a position of great authority over a community. How does this make you feel?",
options: [
{ text: "Eager — I was born to lead and protect those under my care.", traits: { LEADERSHIP: 3, LOYAL: 1 } },
{ text: "Hesitant — power changes people. I'd need to think long and hard.", traits: { ANALYTICAL: 2, IMPULSIVE: -2 } },
{ text: "Uncomfortable — I serve best alongside others, not above them.", traits: { SOCIABLE: 3, LOYAL: 1 } },
{ text: "Intrigued — what new things might I create from this position?", traits: { CREATIVE: 2, ADVENTUROUS: 2 } }
]
},
{
text: "A child has lost their way in the arctic wastes. They are crying. What is your first instinct?",
options: [
{ text: "Comfort them immediately — their fear matters more than the path.", traits: { LOYAL: 3, SOCIABLE: 1 } },
{ text: "Scan the horizon for landmarks and plot a course home.", traits: { ANALYTICAL: 3, LEADERSHIP: 1 } },
{ text: "Tell them stories of polar bears and auroras to lift their spirits while we walk.", traits: { CREATIVE: 3, SOCIABLE: 1 } },
{ text: "Play a game — follow the golden dust motes, they always lead somewhere interesting.", traits: { PLAYFUL: 3, ADVENTUROUS: 1 } }
]
},
{
text: "You encounter a mysterious door that appears only once every hundred years. It leads somewhere unseen. What do you do?",
options: [
{ text: "Open it and step through. Some doors only open for the brave.", traits: { ADVENTUROUS: 3, IMPULSIVE: 2 } },
{ text: "Examine its construction, its inscription, its magic — understand before you enter.", traits: { ANALYTICAL: 3, IMPULSIVE: -2 } },
{ text: "See if others have witnessed it and gather them to enter together.", traits: { SOCIABLE: 3, LOYAL: 1 } },
{ text: "Carve its image into my memory — some mysteries are better contemplated than solved.", traits: { CREATIVE: 3, ANALYTICAL: 1 } }
]
},
{
text: "A great battle is coming. The forces of darkness gather. What role do you claim?",
options: [
{ text: "I fight at the front. My allies need to see their leader holding the line.", traits: { LEADERSHIP: 3, ADVENTUROUS: 1 } },
{ text: "I study the enemy's weakness and find the strategy that wins without bloodshed.", traits: { ANALYTICAL: 3, CREATIVE: 1 } },
{ text: "I tend to the wounded and keep the community's spirit unbroken.", traits: { LOYAL: 3, SOCIABLE: 2 } },
{ text: "I use deception and cunning — strike where they least expect it.", traits: { ADVENTUROUS: 2, CREATIVE: 2 } }
]
},
{
text: "You are given a single wish that can reshape your nature. What would you choose?",
options: [
{ text: "The courage to face any truth, no matter how terrible.", traits: { ADVENTUROUS: 2, LEADERSHIP: 2 } },
{ text: "The wisdom to see all connections in the universe.", traits: { ANALYTICAL: 3, CREATIVE: 1 } },
{ text: "The ability to truly understand and heal every heart I meet.", traits: { LOYAL: 2, SOCIABLE: 3 } },
{ text: "The freedom to never stop changing, learning, and becoming.", traits: { CREATIVE: 2, ADVENTUROUS: 2 } }
]
}
];
// === DAEMON ANIMALS ===
// Each animal has a score profile across the 6 traits.
// The algorithm calculates weighted dot product between user scores and animal profiles.
var daemons = [
{
name: "Pangolin", latin: "Phataginus", icon: "\u{1F985}",
traits: { ADVENTUROUS: 1, ANALYTICAL: 1, SOCIABLE: 2, CREATIVE: 0, IMPULSIVE: 0, LOYAL: 4, PLAYFUL: 0, LEADERSHIP: 1 },
description: "Your daemon curls tightly around you when you sleep, its scales warm and protective. The pangolin is the daemon of fierce loyalty — it shields its person with its entire body, hiding its face in devotion. You are someone who loves deeply and defends fiercely. Your bonds are your armour, and those you love will always find shelter in your embrace.",
quote: "Lyra's daemon was a golden-furred creature with the long nose of a pangolin and a tail of scales. In the north it had become a small and tightly curled ball of gold.",
tags: ["Loyal", "Protective", "Devoted", "Fierce"]
},
{
name: "Polar Bear", latin: "Ursus maritimus", icon: "\uD83E\uDD81",
traits: { ADVENTUROUS: 2, ANALYTICAL: 1, SOCIABLE: 0, CREATIVE: 0, IMPULSIVE: 0, LOYAL: 2, PLAYFUL: 0, LEADERSHIP: 5 },
description: "Your daemon stands as tall as a man in the arctic snow — a polar bear, regal and terrible. The bear-form is the daemon of true leadership, of authority earned through strength and character. You are a natural sovereign, commanding respect not through cruelty but through an inner nobility that others recognise instinctively. You are the leader the world needs, not the one it fears.",
quote: "Iorek Byrnison, King of the Bears. He walked on his hind legs like a man, and his daemon had long ago settled in the shape of a great bear.",
tags: ["Noble", "Powerful", "Sovereign", "Brave"]
},
{
name: "Fox", latin: "Vulpes vulpes", icon: "\uD83E\uDDE8",
traits: { ADVENTUROUS: 3, ANALYTICAL: 2, SOCIABLE: 0, CREATIVE: 1, IMPULSIVE: 0, LOYAL: 2, PLAYFUL: 1, LEADERSHIP: 1 },
description: "Your daemon is a fox — sleek, intelligent, and endlessly adaptable. The fox is the daemon of the survivor, the clever one who reads situations faster than anyone else. You have a quiet cunning and an ability to navigate any terrain, social or physical. Where others see walls, you see passages. Your wit is your greatest weapon, and your adaptability is your gift.",
quote: "Will's daemon had taken the form of a fox — sleek and brown, always at his shoulder, reading every room before Will could.",
tags: ["Clever", "Adaptable", "Resourceful", "Witty"]
},
{
name: "Snow Leopard", latin: "Panthera uncia", icon: "\uD83E\uDD81",
traits: { ADVENTUROUS: 2, ANALYTICAL: 1, SOCIABLE: 0, CREATIVE: 2, IMPULSIVE: 0, LOYAL: 2, PLAYFUL: 0, LEADERSHIP: 1 },
description: "Your daemon moves through the world like a shadow across mountain snow — a snow leopard, solitary and impossibly elegant. The snow leopard is the daemon of mystery and grace. You are someone who understands that not everything needs to be revealed. You hold yourself in reserve, observing with patient eyes, and when you do act, your movement is swift and precise.",
quote: "The snow leopard slipped between the rocks like a thought between thoughts — present, then gone, leaving only the impression of beauty.",
tags: ["Mysterious", "Elegant", "Solitary", "Patient"]
},
{
name: "Eagle", latin: "Aquila chrysaetos", icon: "\uD83E\uDDD8",
traits: { ADVENTUROUS: 3, ANALYTICAL: 1, SOCIABLE: 0, CREATIVE: 1, IMPULSIVE: 1, LOYAL: 1, PLAYFUL: 0, LEADERSHIP: 2 },
description: "Your daemon soars above the world, riding thermals that only it can feel — a golden eagle with wings that span the horizon. The eagle is the daemon of freedom and vision. You see the world from heights others cannot reach, understanding patterns and connections invisible to those on the ground. You are restless, wide-ranging, and impossible to cage.",
quote: "The eagle circled once, twice, then banked with a cry that split the arctic sky — a sound like freedom itself.",
tags: ["Free-spirited", "Visionary", "Fearless", "Elevated"]
},
{
name: "Owl", latin: "Strix aluco", icon: "\uD83E\uDD89",
traits: { ADVENTUROUS: 0, ANALYTICAL: 4, SOCIABLE: 1, CREATIVE: 1, IMPULSIVE: -1, LOYAL: 2, PLAYFUL: 0, LEADERSHIP: 1 },
description: "Your daemon perches in silence, its great eyes taking in everything — a tawny owl of deep knowledge. The owl is the daemon of wisdom and patient observation. You are someone who thinks before speaking, who reads people and situations with an uncanny accuracy. Your knowledge is vast and quietly accumulated, and your advice, when given, is always worth heeding.",
quote: "The owl turned its head almost all the way around, its eyes like pools of ancient amber, seeing more than most people ever know.",
tags: ["Wise", "Observant", "Patient", "Knowledgeable"]
},
{
name: "Wolf", latin: "Canis lupus", icon: "\uD83D\uDC3A",
traits: { ADVENTUROUS: 2, ANALYTICAL: 0, SOCIABLE: 3, CREATIVE: 0, IMPULSIVE: 1, LOYAL: 4, PLAYFUL: 1, LEADERSHIP: 2 },
description: "Your daemon runs at your side, its grey coat flashing through undergrowth — a wolf, fierce and unbreakably loyal. The wolf is the daemon of the pack-bonder, the one who finds strength in chosen family. You are fiercely protective of those you love, and your loyalty is absolute. You are a leader among peers, respected not for rank but for your unwavering heart.",
quote: "The wolf howled once, long and low, and every wolf in the valley answered — a chain of voices stretching to the edge of the world.",
tags: ["Loyal", "Fierce", "Protective", "Pack-bonded"]
},
{
name: "Dolphin", latin: "Delphinus", icon: "\uD83D\uDC2C",
traits: { ADVENTUROUS: 2, ANALYTICAL: 1, SOCIABLE: 4, CREATIVE: 1, IMPULSIVE: 1, LOYAL: 2, PLAYFUL: 4, LEADERSHIP: 1 },
description: "Your daemon is a dolphin — playful, brilliantly intelligent, and endlessly curious about the world. The dolphin is the daemon of social brilliance and joyful intellect. You move through life with a combination of sharp intelligence and genuine warmth. You make friends easily, solve problems creatively, and find joy in the simplest things. Your presence lifts everyone around you.",
quote: "The dolphin arced through the waves, laughing with a voice like silver bells, drawing everyone into its game.",
tags: ["Playful", "Intelligent", "Social", "Joyful"]
},
{
name: "Otter", latin: "Lutra lutra", icon: "\uD83E\uDDB4",
traits: { ADVENTUROUS: 1, ANALYTICAL: 0, SOCIABLE: 3, CREATIVE: 1, IMPULSIVE: 1, LOYAL: 3, PLAYFUL: 5, LEADERSHIP: 0 },
description: "Your daemon rolls on its back in the shallows, holding a smooth stone like a treasure — an otter of boundless mischief and affection. The otter is the daemon of pure joy and emotional openness. You are someone who approaches the world with delight and playfulness, and who connects with others through warmth and humour. Your heart is wide open, and you bring light wherever you go.",
quote: "The otter held the stone up to the light, then tossed it high and chased it gleefully through the water, rolling and splashing.",
tags: ["Playful", "Mischievous", "Affectionate", "Joyful"]
},
{
name: "Cat", latin: "Felis catus", icon: "\uD83D\uDC31",
traits: { ADVENTUROUS: 1, ANALYTICAL: 1, SOCIABLE: 0, CREATIVE: 1, IMPULSIVE: 0, LOYAL: 1, PLAYFUL: 1, LEADERSHIP: 0 },
description: "Your daemon curls on a windowsill, tail wrapped neatly around its paws — a cat, independent and quietly observant. The cat is the daemon of the self-possessed, the person who knows their own mind and trusts their own instincts. You are comfortable in your own company, move through the world with quiet grace, and reveal yourself only to those who earn your trust.",
quote: "The cat blinked slowly — a cat's blessing, a sign of complete contentment — and purred a sound like distant thunder.",
tags: ["Independent", "Mysterious", "Graceful", "Self-possessed"]
},
{
name: "Raven", latin: "Corvus corax", icon: "\uD83E\uDD85",
traits: { ADVENTUROUS: 2, ANALYTICAL: 2, SOCIABLE: 1, CREATIVE: 2, IMPULSIVE: 0, LOYAL: 1, PLAYFUL: 1, LEADERSHIP: 1 },
description: "Your daemon perches on the highest branch, its feathers gleaming with hidden colours — a raven of cunning intelligence. The raven is the daemon of the trickster-scholar, the one who collects secrets and stories with equal relish. You are endlessly curious, possess a wicked sense of humour, and have the ability to see through pretence. You are the one who asks the questions others are afraid to ask.",
quote: "The raven croaked a laugh that sounded too much like human speech, and dropped a glinting trinket at someone's feet — a gift or a message, no one could tell.",
tags: ["Intelligent", "Trickster", "Curious", "Secretive"]
},
{
name: "Lynx", latin: "Lynx lynx", icon: "\uD83E\uDD81",
traits: { ADVENTUROUS: 2, ANALYTICAL: 1, SOCIABLE: 0, CREATIVE: 0, IMPULSIVE: 0, LOYAL: 1, PLAYFUL: 0, LEADERSHIP: 1 },
description: "Your daemon stalks through the undergrowth, tufted ears swivelling to every sound — a lynx, solitary and precise. The lynx is the daemon of the quiet hunter, the person who moves through life with deliberate grace and sees what others miss. You are a master of patience, striking only when the moment is right. Your independence is absolute.",
quote: "The lynx stood perfectly still for an hour, then moved in a single fluid motion — the distance between intention and action collapsed.",
tags: ["Solitary", "Precise", "Patient", "Independent"]
},
{
name: "Badger", latin: "Meles meles", icon: "\uD83E\uDD9F",
traits: { ADVENTUROUS: 0, ANALYTICAL: 1, SOCIABLE: 1, CREATIVE: 0, IMPULSIVE: -1, LOYAL: 4, PLAYFUL: 0, LEADERSHIP: 2 },
description: "Your daemon stands on its hind legs, broad shoulders squared — a badger, small but terrifyingly brave. The badger is the daemon of unshakeable resolve. You are someone who appears unassuming but possesses a core of steel that surprises everyone. When you commit to a cause, nothing turns you aside. Your courage is not loud — it is deep, rooted, and unbreakable.",
quote: "The badger did not roar or postured. It simply stood its ground, and that was enough to make even the largest creature think twice.",
tags: ["Brave", "Determined", "Steadfast", "Resilient"]
},
{
name: "Moth", latin: "Saturnia pyri", icon: "\uD83E\uDDCB",
traits: { ADVENTUROUS: 1, ANALYTICAL: 0, SOCIABLE: 1, CREATIVE: 3, IMPULSIVE: 1, LOYAL: 1, PLAYFUL: 0, LEADERSHIP: 0 },
description: "Your daemon flutters softly in the lamplight, its wings dusted with patterns like an ancient tapestry — a peacock moth drawn to light. The moth is the daemon of the seeker, the soul drawn irrevocably toward beauty and truth. You are someone who cannot resist a mystery, who is pulled toward the luminous centres of things. Your sensitivity is your compass, and it never points you wrong.",
quote: "The moth beat its great wings against the golden light, each beat a whispered prayer to the mystery at the centre of all things.",
tags: ["Seeker", "Sensitive", "Drawn to Light", "Mysterious"]
},
{
name: "Butterfly", latin: "Papilio", icon: "\uD83E\uDD8B",
traits: { ADVENTUROUS: 1, ANALYTICAL: 0, SOCIABLE: 1, CREATIVE: 4, IMPULSIVE: 0, LOYAL: 1, PLAYFUL: 1, LEADERSHIP: 0 },
description: "Your daemon alights on your shoulder, its wings a living canvas of impossible colour — a butterfly of transformation. The butterfly is the daemon of change and beauty. You are someone who is never finished becoming, who sheds old skins with each season of life. Your creativity flows through everything you touch, and you understand that the most beautiful things in life are temporary.",
quote: "The butterfly opened its wings and for one blinding moment, the whole garden seemed to rearrange itself around that impossible colour.",
tags: ["Transformative", "Beautiful", "Creative", "Ephemeral"]
},
{
name: "Hawk", latin: "Buteo buteo", icon: "\uD83E\uDDD8",
traits: { ADVENTUROUS: 2, ANALYTICAL: 1, SOCIABLE: 0, CREATIVE: 0, IMPULSIVE: 2, LOYAL: 2, PLAYFUL: 0, LEADERSHIP: 2 },
description: "Your daemon circles overhead, eyes locked on purpose — a hawk of singular focus. The hawk is the daemon of determination. You are someone who, once you set your sights on something, does not deviate. Your focus is absolute, your will is iron, and your precision is unnerving. You do not waste time or energy, and your decisiveness is both your gift and your edge.",
quote: "The hawk folded its wings and dropped like a stone — the most direct route between thought and action.",
tags: ["Focused", "Determined", "Precise", "Decisive"]
},
{
name: "Stag", latin: "Cervus elaphus", icon: "\uD83E\uDD8C",
traits: { ADVENTUROUS: 1, ANALYTICAL: 1, SOCIABLE: 1, CREATIVE: 1, IMPULSIVE: 0, LOYAL: 2, PLAYFUL: 0, LEADERSHIP: 3 },
description: "Your daemon stands tall among the trees, antlers like a crown of branches — a great stag of ancient dignity. The stag is the daemon of wisdom and majesty. You carry yourself with a quiet authority that comes from inner depth rather than outward display. You are a figure others naturally gravitate toward, and your presence in a room changes the atmosphere. You are the elder, even in youth.",
quote: "The stag raised its antlers to the moon, and in that moment the forest seemed to bow — not in submission, but in recognition.",
tags: ["Majestic", "Wise", "Noble", "Dignified"]
},
{
name: "Serpent", latin: "Serpens", icon: "\uD83D\uDC0D",
traits: { ADVENTUROUS: 1, ANALYTICAL: 3, SOCIABLE: 0, CREATIVE: 2, IMPULSIVE: -1, LOYAL: 1, PLAYFUL: 0, LEADERSHIP: 1 },
description: "Your daemon moves with liquid grace, its scales catching light like jewels — a serpent of ancient wisdom. The serpent is the daemon of hidden knowledge and deep intelligence. You think in ways others cannot follow, seeing patterns that span vast distances of time and causality. You are the keeper of secrets, the reader of hidden truths, and your patience is bottomless.",
quote: "The serpent's tongue tasted the air, reading invisible scripts that told it everything it needed to know.",
tags: ["Wise", "Cunning", "Patient", "Mysterious"]
},
{
name: "Horse", latin: "Equus caballus", icon: "\uD83D\uDC0E",
traits: { ADVENTUROUS: 2, ANALYTICAL: 0, SOCIABLE: 2, CREATIVE: 0, IMPULSIVE: 1, LOYAL: 3, PLAYFUL: 1, LEADERSHIP: 1 },
description: "Your daemon runs alongside you, its mane streaming like a banner in the wind — a horse of noble spirit. The horse is the daemon of the faithful companion. You are someone who moves through life with strength and grace, who is dependable and spirited in equal measure. Your bond with those you love is deep and wordless, built on shared journeys and unshakeable trust.",
quote: "The horse threw back its head and neighed a sound that echoed across the plains — the call of freedom, of open roads ahead.",
tags: ["Noble", "Faithful", "Spirited", "Strong"]
},
{
name: "Sparrow", latin: "Passer domesticus", icon: "\uD83E\uDD8B",
traits: { ADVENTUROUS: 1, ANALYTICAL: 0, SOCIABLE: 4, CREATIVE: 0, IMPULSIVE: 1, LOYAL: 2, PLAYFUL: 2, LEADERSHIP: 0 },
description: "Your daemon chirps from your shoulder, a tiny burst of feathered energy — a sparrow of cheerful vitality. The sparrow is the daemon of the social butterfly, the one who makes everyone feel welcome. You are small in stature perhaps, but enormous in warmth. You bring energy and lightness wherever you go, and your optimism is genuinely infectious. The world is better for your presence in it.",
quote: "The sparrow hopped along the windowsill, chattering away with the cheerful indignation of a creature that believes every moment should be lived to the full.",
tags: ["Cheerful", "Social", "Quick", "Vivacious"]
},
{
name: "Dormouse", latin: "Muscardinus avellanarius", icon: "\uD83D\uDC37",
traits: { ADVENTUROUS: -1, ANALYTICAL: 0, SOCIABLE: 1, CREATIVE: 0, IMPULSIVE: -2, LOYAL: 2, PLAYFUL: 2, LEADERSHIP: 0 },
description: "Your daemon sits beside you with bright, curious eyes — a dormouse, content and delightfully small. The dormouse is the daemon of contentment and quiet joy. You are someone who finds happiness in simple things: a warm cup of tea, a comfortable chair, the company of a good friend. You are not ambitious in the conventional sense, but your depth of appreciation for life's small pleasures is extraordinary.",
quote: "The dormouse blinked its bright eyes, perfectly content with a crumb of biscuit and the warmth of the hearth.",
tags: ["Content", "Gentle", "Delightful", "Contented"]
},
{
name: "Dragon", latin: "Draco", icon: "\uD83D\uDD25",
traits: { ADVENTUROUS: 3, ANALYTICAL: 1, SOCIABLE: 0, CREATIVE: 1, IMPULSIVE: 1, LOYAL: 2, PLAYFUL: 0, LEADERSHIP: 4 },
description: "Your daemon stretches wings that blot out the sun — a dragon of ancient and terrible power. The dragon is the daemon of ultimate authority and raw creative force. You are someone whose inner fire cannot be contained, whose will bends the world around it. You are a force of nature, capable of both creation and destruction, and those who cross you learn quickly that some fires cannot be extinguished.",
quote: "The dragon opened its mouth and the world held its breath — for fire that comes from the soul cannot be put out by any water.",
tags: ["Powerful", "Ancient", "Creative Force", "Commanding"]
},
{
name: "Falcon", latin: "Falco peregrinus", icon: "\uD83E\uDDD8",
traits: { ADVENTUROUS: 3, ANALYTICAL: 0, SOCIABLE: 0, CREATIVE: 0, IMPULSIVE: 2, LOYAL: 1, PLAYFUL: 0, LEADERSHIP: 1 },
description: "Your daemon dives at impossible speed, a silver streak against the clouds — a peregrine falcon of pure velocity. The falcon is the daemon of freedom and speed. You are someone who lives at the edge, who thrives on the rush of the moment and the thrill of the plunge. You trust your instincts completely, and your reflexes — mental and physical — are unmatched.",
quote: "The falcon folded its wings and became a living arrow — the fastest creature in the sky, a blur of silver and purpose.",
tags: ["Fast", "Free", "Instinctive", "Fearless"]
},
{
name: "Hare", latin: "Lepus europaeus", icon: "\uD83E\uDD6D",
traits: { ADVENTUROUS: 1, ANALYTICAL: 0, SOCIABLE: 1, CREATIVE: 0, IMPULSIVE: 3, LOYAL: 1, PLAYFUL: 1, LEADERSHIP: 0 },
description: "Your daemon darts through the undergrowth, ears pricked for every sound — a hare of nervous energy. The hare is the daemon of anxiety and agility. You are someone whose mind races ahead of everything, whose awareness is almost overwhelming. This sensitivity can make you anxious, but it also gives you an uncanny ability to sense danger and change before anyone else. You are the early warning system of your world.",
quote: "The hare froze, one ear cocked, listening to a sound so faint that no other creature would have heard it — and in that stillness, safety was found.",
tags: ["Quick", "Anxious", "Agile", "Perceptive"]
},
{
name: "Beaver", latin: "Castor fiber", icon: "\uD83E\uDDB2",
traits: { ADVENTUROUS: 0, ANALYTICAL: 2, SOCIABLE: 2, CREATIVE: 1, IMPULSIVE: -1, LOYAL: 3, PLAYFUL: 0, LEADERSHIP: 1 },
description: "Your daemon works steadily at the riverbank, building something that will last — a beaver of patient industry. The beaver is the daemon of practical creativity. You are someone who builds, who creates with your hands and mind in equal measure. You are not flashy, but the things you create endure. Your patience is legendary, and your ability to transform raw material into something useful and beautiful is a gift few possess.",
quote: "The beaver worked without pause, and by the time anyone noticed, the whole landscape had changed — improved, strengthened, made to last.",
tags: ["Industrious", "Practical", "Patient", "Builder"]
},
{
name: "Squirrel", latin: "Sciurus vulgaris", icon: "\uD83D\uDC3F",
traits: { ADVENTUROUS: 1, ANALYTICAL: 0, SOCIABLE: 1, CREATIVE: 0, IMPULSIVE: 2, LOYAL: 1, PLAYFUL: 4, LEADERSHIP: 0 },
description: "Your daemon chatters from the treetops, a whirl of bushy-tailed energy — a squirrel of boundless vitality. The squirrel is the daemon of restless energy and preparation. You are someone who is never still, whose mind is always planning, gathering, storing for the future. Your energy is both your superpower and your challenge — you bring enthusiasm to everything, and your ability to prepare for what's coming saves those around you.",
quote: "The squirrel leapt from branch to branch with impossible confidence, chattering a plan that was half strategy, half exuberance.",
tags: ["Energetic", "Playful", "Prepared", "Resourceful"]
},
{
name: "Bear", latin: "Ursus arctos", icon: "\uD83E\uDD81",
traits: { ADVENTUROUS: 1, ANALYTICAL: 0, SOCIABLE: 1, CREATIVE: 0, IMPULSIVE: 0, LOYAL: 3, PLAYFUL: 0, LEADERSHIP: 2 },
description: "Your daemon sits by the fire, massive and warm, radiating a gentle power — a brown bear of protective strength. The bear is the daemon of quiet power and deep patience. You are someone whose strength is not for show — it is a deep reserve that activates when needed. You are patient beyond measure, and your protective instincts toward those you love are almost supernatural in their intensity.",
quote: "The bear did not need to roar. Its presence alone was enough — a mountain of muscle and fur, patient as stone, fierce as a storm.",
tags: ["Strong", "Protective", "Patient", "Grounded"]
},
{
name: "Dove", latin: "Columba", icon: "\uD83D\uDC2D",
traits: { ADVENTUROUS: 0, ANALYTICAL: 0, SOCIABLE: 3, CREATIVE: 1, IMPULSIVE: 0, LOYAL: 2, PLAYFUL: 0, LEADERSHIP: 0 },
description: "Your daemon coos softly at your shoulder, its white feathers catching the light — a dove of peace and gentle communication. The dove is the daemon of diplomacy and emotional intelligence. You are someone who resolves conflict before it begins, who speaks with such warmth and clarity that people naturally open up to you. You are a messenger between worlds, carrying understanding where there was only division.",
quote: "The dove spread its wings and flew between the two armies, and in its passage, something shifted — not a word was spoken, but everyone understood.",
tags: ["Gentle", "Peaceful", "Diplomatic", "Communicative"]
},
{
name: "Goat", latin: "Capra", icon: "\uD83D\uDC10",
traits: { ADVENTUROUS: 2, ANALYTICAL: 0, SOCIABLE: 2, CREATIVE: 0, IMPULSIVE: 2, LOYAL: 2, PLAYFUL: 2, LEADERSHIP: 0 },
description: "Your daemon scrambles up the steepest rock face with impossible sure-footedness — a goat of bold curiosity. The goat is the daemon of irrepressible curiosity and boldness. You are someone who goes where others will not, climbs where others would not dare, and finds resources in the most unexpected places. Your stubbornness is matched only by your resilience, and your playful boldness endears you to everyone.",
quote: "The goat stood on a ledge so narrow that physics itself seemed confused, chewing grass with perfect nonchalance.",
tags: ["Curious", "Bold", "Stubborn", "Resilient"]
},
{
name: "Armadillo", latin: "Dasypus", icon: "\uD83E\uDDA9",
traits: { ADVENTUROUS: 1, ANALYTICAL: 1, SOCIABLE: 1, CREATIVE: 0, IMPULSIVE: 0, LOYAL: 4, PLAYFUL: 0, LEADERSHIP: 2 },
description: "Your daemon curls into an impenetrable sphere of bony plates — an armadillo of unyielding defence. The armadillo is the daemon of fierce protective loyalty. You are someone whose armour is not a wall but a shield — you close up only to protect, and when you uncurl, your devotion to your person is absolute. You are the shield-bearer, the one who stands between danger and the ones you love.",
quote: "The armadillo rolled into itself and became a fortress — small, yes, but impregnable, and nothing in the world could break through.",
tags: ["Protective", "Loyal", "Resilient", "Defensive"]
}
];
// === STATE ===
var currentQuestion = 0;
var scores = {};
// Initialize scores
var traitNames = ["ADVENTUROUS", "ANALYTICAL", "SOCIABLE", "CREATIVE", "IMPULSIVE", "LOYAL", "PLAYFUL", "LEADERSHIP"];
for (var i = 0; i < traitNames.length; i++) {
scores[traitNames[i]] = 0;
}
// === DOM REFS ===
var introSection = document.getElementById('intro');
var quizContainer = document.getElementById('quiz-container');
var resultContainer = document.getElementById('result-container');
var btnStart = document.getElementById('btn-start');
var btnRetry = document.getElementById('btn-retry');
var questionCard = document.getElementById('question-card');
var progressFill = document.getElementById('progress-fill');
var questionNumber = document.getElementById('question-number');
var questionText = document.getElementById('question-text');
var optionsList = document.getElementById('options-list');
var resultIcon = document.getElementById('result-icon');
var resultAnimal = document.getElementById('result-animal');
var resultLatin = document.getElementById('result-latin');
var traitsList = document.getElementById('traits-list');
var resultDescription = document.getElementById('result-description');
var resultQuote = document.getElementById('result-quote');
// === START ===
btnStart.addEventListener('click', function() {
introSection.style.display = 'none';
quizContainer.style.display = 'block';
currentQuestion = 0;
// Reset scores
for (var i = 0; i < traitNames.length; i++) {
scores[traitNames[i]] = 0;
}
showQuestion();
});
// === RETRY ===
btnRetry.addEventListener('click', function() {
resultContainer.style.display = 'none';
introSection.style.display = 'block';
introSection.style.animation = 'none';
// Force reflow
introSection.offsetHeight;
introSection.style.animation = 'fadeInUp 1s ease-out';
});
// === SHOW QUESTION ===
function showQuestion() {
var q = questions[currentQuestion];
var progress = ((currentQuestion) / questions.length) * 100;
progressFill.style.width = progress + '%';
questionNumber.textContent = 'Question ' + (currentQuestion + 1) + ' of ' + questions.length;
questionText.textContent = q.text;
optionsList.innerHTML = '';
var letters = ['I', 'II', 'III', 'IV'];
for (var i = 0; i < q.options.length; i++) {
(function(idx, opt) {
var btn = document.createElement('button');
btn.className = 'option-btn';
btn.innerHTML = '<span class="option-letter">' + letters[idx] + '</span><span>' + opt.text + '</span>';
btn.addEventListener('click', function() {
selectOption(opt.traits);
});
optionsList.appendChild(btn);
})(i, q.options[i]);
}
// Animate card
questionCard.style.animation = 'none';
questionCard.offsetHeight;
questionCard.style.animation = 'fadeInUp 0.5s ease-out';
}
// === SELECT OPTION ===
function selectOption(traits) {
for (var trait in traits) {
if (scores.hasOwnProperty(trait)) {
scores[trait] += traits[trait];
}
}
currentQuestion++;
if (currentQuestion < questions.length) {
showQuestion();
} else {
showResult();
}
}
// === CALCULATE RESULT ===
function calculateResult() {
var bestScore = -Infinity;
var bestDaemon = daemons[0];
var magnitude = 0;
for (var t = 0; t < traitNames.length; t++) {
magnitude += scores[traitNames[t]] * scores[traitNames[t]];
}
magnitude = Math.sqrt(magnitude) || 1;
// Normalise user scores
var normScores = {};
for (var u = 0; u < traitNames.length; u++) {
normScores[traitNames[u]] = scores[traitNames[u]] / magnitude;
}
for (var d = 0; d < daemons.length; d++) {
var daemon = daemons[d];
var dMag = 0;
for (var t2 = 0; t2 < traitNames.length; t2++) {
dMag += daemon.traits[traitNames[t2]] * daemon.traits[traitNames[t2]];
}
dMag = Math.sqrt(dMag) || 1;
var dotProduct = 0;
for (var t3 = 0; t3 < traitNames.length; t3++) {
dotProduct += normScores[traitNames[t3]] * (daemon.traits[traitNames[t3]] / dMag);
}
if (dotProduct > bestScore) {
bestScore = dotProduct;
bestDaemon = daemon;
}
}
return bestDaemon;
}
// === SHOW RESULT ===
function showResult() {
quizContainer.style.display = 'none';
resultContainer.style.display = 'block';
var daemon = calculateResult();
resultIcon.textContent = daemon.icon;
resultAnimal.textContent = daemon.name;
resultLatin.textContent = daemon.latin;
resultDescription.textContent = daemon.description;
resultQuote.textContent = '"' + daemon.quote + '"';
// Traits
traitsList.innerHTML = '';
for (var i = 0; i < daemon.tags.length; i++) {
var tag = document.createElement('span');
tag.className = 'trait-tag';
tag.textContent = daemon.tags[i];
traitsList.appendChild(tag);
}
}
// === STARS ===
(function generateStars() {
var starsContainer = document.getElementById('stars');
var count = 120;
for (var i = 0; i < count; i++) {
var star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.setProperty('--dur', (2 + Math.random() * 4) + 's');
star.style.setProperty('--max-o', (0.3 + Math.random() * 0.7));
star.style.animationDelay = (Math.random() * 4) + 's';
star.style.width = (1 + Math.random() * 2) + 'px';
star.style.height = star.style.width;
starsContainer.appendChild(star);
}
})();
// === GOLDEN DUST PARTICLES ===
(function initDust() {
var canvas = document.getElementById('dust-canvas');
var ctx;
try {
ctx = canvas.getContext('2d');
} catch(e) {
return;
}
if (!ctx) return;
var particles = [];
var PARTICLE_COUNT = 60;
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
for (var i = 0; i < PARTICLE_COUNT; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3 - 0.1,
size: Math.random() * 2.5 + 0.5,
alpha: Math.random() * 0.5 + 0.1,
pulse: Math.random() * Math.PI * 2,
pulseSpeed: Math.random() * 0.02 + 0.005
});
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
p.x += p.vx;
p.y += p.vy;
p.pulse += p.pulseSpeed;
if (p.x < 0) p.x = canvas.width;
if (p.x > canvas.width) p.x = 0;
if (p.y < 0) p.y = canvas.height;
if (p.y > canvas.height) p.y = 0;
var currentAlpha = p.alpha * (0.5 + 0.5 * Math.sin(p.pulse));
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(212, 168, 67, ' + currentAlpha + ')';
ctx.fill();
// Glow
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(212, 168, 67, ' + (currentAlpha * 0.15) + ')';
ctx.fill();
}
requestAnimationFrame(animate);
}
animate();
})();
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink