-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwhy.html
More file actions
152 lines (132 loc) · 8.29 KB
/
Copy pathwhy.html
File metadata and controls
152 lines (132 loc) · 8.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why Us | Chemorphis</title>
<meta name="title" content="Chemorphis | Quantum-Accurate 3D Chemistry Visualisations">
<meta name="description" content="Studio for advanced chemistry visualisations. We compute quantum reaction coordinates via DFT calculations to render publication-grade 3D mechanisms, interactive assets, and cover art.">
<meta name="keywords" content="chemistry visualization, 3D reaction mechanism, computational chemistry animation, DFT reaction coordinate, educational chemistry graphics, interactive 3D molecule, orbital rendering">
<meta name="author" content="Chemorphis Studio">
<link rel="canonical" href="https://chemorphis-studio.github.io/index.html">
<meta property="og:type" content="website">
<meta property="og:url" content="https://chemorphis-studio.github.io/">
<meta property="og:title" content="Chemorphis | Quantum-Accurate 3D Chemistry Visualisations">
<meta property="og:description" content="Bespoke 3D organic mechanisms, interactive WebGL structures, and publication-grade analytics computed from first principles.">
<meta property="og:image" content="https://chemorphis-studio.github.io/assets/images/og-preview.png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "Chemorphis",
"url": "https://chemorphis-studio.github.io",
"logo": "https://chemorphis-studio.github.io/assets/favicon.ico",
"description": "Studio specializing in advanced computational chemistry visualisations, DFT reaction mechanism animations, and interactive educational models.",
"email": "chemorphis@gmail.com",
"sameAs": []
}
</script>
<link rel="stylesheet" href="css/style.css">
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
</head>
<body>
<nav class="container">
<div class="logo"><a href="index.html" style="text-decoration:none; color:var(--black);">Chemorphis</a></div>
<div class="nav-links">
<a href="engine.html">Flagship Engine</a>
<a href="interactive.html">Interactive 3D</a>
<a href="graphics.html">Custom Graphics</a>
<a href="render.html">Cinematic Renders</a>
<a href="design.html">Design Options</a>
<a href="why.html" style="color: var(--blue);">Why Us?</a>
<a href="contact.html" class="cta-btn">Contact Us</a>
</div>
<div class="nav-arrow" id="navArrow">▼</div>
</nav>
<main>
<section class="page-header" style="position: relative; width: 100vw; overflow: hidden;">
<svg width="100%" height="100%" viewBox="0 0 1440 300" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg" style="position: absolute; left: 0; top: 0; opacity: 0.05; z-index: -1; pointer-events: none;">
<path d="M0 50 C 360 200, 1080 -50, 1440 50" stroke="black" stroke-width="2"/>
<path d="M0 80 C 360 230, 1080 -20, 1440 80" stroke="black" stroke-width="2"/>
<path d="M0 110 C 360 260, 1080 10, 1440 110" stroke="black" stroke-width="2"/>
<path d="M0 140 C 360 290, 1080 40, 1440 140" stroke="black" stroke-width="2"/>
</svg>
<div class="container">
<span class="mono-label">// 07. EDUCATION</span>
<h1 style="font-size: 4rem; max-width: 1000px;">Why Chemorphis?</h1>
<p class="subheading" style="max-width: 800px;">Chemistry is fundamentally a three-dimensional science, yet 95% of chemistry education is taught using two-dimensional, static approximations.</p>
</div>
</section>
<section class="container" style="padding-bottom: 40px;">
<div style="max-width: 800px;">
<p style="font-size: 1.2rem; margin-top: 10px; margin-bottom: 20px;">In educational psychology, Sweller’s <strong>cognitive load theory</strong> and Paivio’s <strong>dual-coding theory</strong> state that learning is heavily hindered when students must mentally integrate disjointed visual and abstract information (the <em>split-attention effect</em>).</p>
<p style="font-size: 1.2rem; color: #555;">When a student watches a traditional lecture, they must look at a 2D molecule, mentally rotate it in 3D, read a separate energy graph on another slide, and infer motion from a static arrow—all at once.</p>
<div class="massive-callout">
We do not guess how molecules move. We calculate them.
</div>
<p style="font-size: 1.2rem; margin-bottom: 20px;">Chemorphis animations eliminate cognitive friction by unifying these channels into a single, synchronised visual feed.</p>
<p style="font-size: 1.2rem; font-weight: 700; color: var(--blue);">We at Chemorphis are chemists first and animators second. Every concept is securely rooted in core science.</p>
</div>
</section>
<section class="container">
<h2 style="font-size: 2.5rem; border-bottom: 2px solid var(--black); margin-top: 40 px; padding-bottom: 20px; margin-bottom: 40px;">Built for your brand. Designed for your platform.</h2>
<p style="font-size: 1.1rem; max-width: 800px; margin-bottom: 60px;">We never force generic styles onto your curriculum. Every asset is built from scratch to integrate into your visual brand identity. Colour palettes, typography, UI, and every fine detail can be controlled.</p>
<!-- Image Comparison -->
<div class="side-by-side-grid">
<div class="media-box"><img src="assets/images/1.png" alt="Style 1"></div>
<div class="media-box"><img src="assets/images/2.png" alt="Style 2"></div>
</div>
<!-- GLB Comparison -->
<div class="side-by-side-grid">
<div class="media-box">
<model-viewer src="assets/models/1.glb" camera-controls auto-rotate></model-viewer>
</div>
<div class="media-box">
<model-viewer src="assets/models/2.glb" camera-controls auto-rotate></model-viewer>
</div>
</div>
<!-- Video Comparison -->
<div class="side-by-side-grid" style="margin-bottom: 60px;">
<div class="media-box">
<video autoplay muted loop playsinline><source src="assets/videos/1.mp4" type="video/mp4"></video>
</div>
<div class="media-box">
<video autoplay muted loop playsinline><source src="assets/videos/2.mp4" type="video/mp4"></video>
</div>
</div>
<p style="font-size: 1.1rem; font-weight: 700; text-align: center; color: var(--red); padding-bottom: 20px; margin-bottom: 30px;">Extra features and distinct visual styles can be developed upon request.</p>
</section>
</main>
<footer class="container footer-style">
© CHEMORPHIS STUDIO. ALL RIGHTS RESERVED. // THE PREMIER CHEMISTRY VISUALISATION TOOL
</footer>
<script>
const nav = document.querySelector('nav');
const arrow = document.getElementById('navArrow');
const dropdown = document.querySelector('.dropdown');
let lastScrollY = window.scrollY;
window.addEventListener('scroll', () => {
if (window.innerWidth <= 768) {
if (window.scrollY > 80 && window.scrollY > lastScrollY) {
nav.classList.add('collapsed-state');
}
lastScrollY = window.scrollY;
}
});
if (arrow) {
arrow.addEventListener('click', () => {
nav.classList.toggle('collapsed-state');
});
}
if (dropdown) {
dropdown.addEventListener('click', (e) => {
if (window.innerWidth <= 1024) {
e.stopPropagation();
dropdown.classList.toggle('active');
}
});
}
</script>
</body>
</html>