Skip to content

Add animated Terraphim AI logo with p5.js mandala visualization #577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlexMikhalev wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add animated Terraphim AI logo with p5.js mandala visualization #577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a6ca79
feat(website): add animated Terraphim logo variation using p5.js
claude Feb 23, 2026
5926b14
Merge branch 'main' into claude/mathober-day-10-WXVTQ
AlexMikhalev Feb 25, 2026
586de16
feat(website): add SVG animated logo, replace p5.js iframe on homepage
claude Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 196 additions & 0 deletions website/static/images/terraphim_logo_animated.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions website/static/logo-animation/embed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
display: flex;
flex-direction: column;
overflow: hidden;
background: rgb(15, 12, 10);
height: 100vh;
justify-content: center;
align-items: center;
}
#logo-container { display: flex; justify-content: center; align-items: center; }
#logo-container canvas { display: block; }
</style>
</head>
<body>
<div id="logo-container"></div>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
75 changes: 75 additions & 0 deletions website/static/logo-animation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Terraphim AI - Animated Logo</title>
<meta name="description" content="Terraphim AI animated logo - stellated polygon mandala variation inspired by Mathober Day 10" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
overflow: hidden;
background: rgb(15, 12, 10);
height: 100vh;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}

#logo-container {
display: flex;
justify-content: center;
align-items: center;
}

#logo-container canvas {
display: block;
}

.brand-text {
margin-top: 1.5rem;
text-align: center;
color: rgba(232, 128, 28, 0.85);
font-size: 1.2rem;
letter-spacing: 0.5em;
text-transform: uppercase;
font-weight: 300;
}

.brand-text .subtitle {
display: block;
margin-top: 0.3rem;
color: rgba(245, 197, 24, 0.4);
font-size: 0.65rem;
letter-spacing: 0.3em;
}

.hint {
position: fixed;
bottom: 1rem;
color: rgba(200, 120, 40, 0.25);
font-size: 0.7rem;
letter-spacing: 0.2em;
}
</style>
</head>
<body>
<div id="logo-container"></div>
<div class="brand-text">
Terraphim AI
<span class="subtitle">Privacy Preserving Intelligence</span>
</div>
<div class="hint">click to regenerate</div>

<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
Loading
Loading