-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdesign.html
More file actions
459 lines (411 loc) · 27.2 KB
/
Copy pathdesign.html
File metadata and controls
459 lines (411 loc) · 27.2 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Options | 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" style="color: var(--blue);">Design Options</a>
<a href="why.html">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">// 06. CUSTOMISATION</span>
<h1 style="font-size: 4rem; max-width: 1000px;">Design Options</h1>
<p class="subheading" style="max-width: 800px;">Chemorphis's unique engine offers complete customisation over the finest of details. Explore some of our options below.</p>
</div>
</section>
<!-- SECTION 1: SHADER & MATERIAL SYSTEMS -->
<section class="container" style="padding: 100px 0;">
<h3 class="red-heading" style="font-size: 2.8rem; margin-bottom: 15px;">Shader & Material Systems</h3>
<p style="font-size: 1.15rem; color: #555; max-width: 700px;">Different pedagogical contexts require different finishes to match your platform's tone and clarity goals.</p>
<div class="material-grid">
<!-- Material 01 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material1.png" alt="Material: Plastic">
<div class="visual-tag">Material 1</div>
</div>
<div class="material-body">
<h4 class="material-title">Plastic</h4>
<p class="material-desc">Classic standard with smooth specular highlights. High readability and low visual clutter.</p>
</div>
</div>
<!-- Material 02 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material2.png" alt="Material: Glossy">
<div class="visual-tag">Material 2</div>
</div>
<div class="material-body">
<h4 class="material-title">Glossy</h4>
<p class="material-desc">Highly polished finish with rich reflections, adding visual pop and depth.</p>
</div>
</div>
<!-- Material 03 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material3.png" alt="Material: Matte">
<div class="visual-tag">Material 3</div>
</div>
<div class="material-body">
<h4 class="material-title">Matte</h4>
<p class="material-desc">Non-reflective pure finish that emphasises form and connectivity with zero glare.</p>
</div>
</div>
<!-- Material 04 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material4.png" alt="Material: Metallic">
<div class="visual-tag">Material 4</div>
</div>
<div class="material-body">
<h4 class="material-title">Metallic</h4>
<p class="material-desc">Alloy sheen perfect for unique visual styles.</p>
</div>
</div>
<!-- Material 05 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material5.png" alt="Material: Glass">
<div class="visual-tag">Material 5</div>
</div>
<div class="material-body">
<h4 class="material-title">Glass</h4>
<p class="material-desc">Refractive transparency with realistic light bending; aesthetic.</p>
</div>
</div>
<!-- Material 06 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material6.png" alt="Material: Emission">
<div class="visual-tag">Material 6</div>
</div>
<div class="material-body">
<h4 class="material-title">Emission</h4>
<p class="material-desc">Self-illuminating material for drawing attention and creating high contrast.</p>
</div>
</div>
<!-- Material 07 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material7.png" alt="Material: Toon / Cel Shaded">
<div class="visual-tag">Material 7</div>
</div>
<div class="material-body">
<h4 class="material-title">Toon / Cel-Shaded</h4>
<p class="material-desc">Clean graphic illustration style with bold outlines.</p>
</div>
</div>
<!-- Material 08 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material8.png" alt="Material: Wireframe">
<div class="visual-tag">Material 8</div>
</div>
<div class="material-body">
<h4 class="material-title">Wireframe</h4>
<p class="material-desc">Rough surface with slight reflection, drawing attention to structure.</p>
</div>
</div>
<!-- Material 09 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material9.png" alt="Material: Clay">
<div class="visual-tag">Material 9</div>
</div>
<div class="material-body">
<h4 class="material-title">Clay</h4>
<p class="material-desc">Sculptural look similar to matte.</p>
</div>
</div>
<!-- Material 10 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material10.png" alt="Material: Pearlescent">
<div class="visual-tag">Material 10</div>
</div>
<div class="material-body">
<h4 class="material-title">Pearlescent</h4>
<p class="material-desc">Shiny, iridescent. Provides a premium, stylised aesthetic.</p>
</div>
</div>
<!-- Material 11 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material11.png" alt="Material: Velvet">
<div class="visual-tag">Material 11</div>
</div>
<div class="material-body">
<h4 class="material-title">Velvet</h4>
<p class="material-desc">Soft, luxurious look delivering a sophisticated and cinematic render.</p>
</div>
</div>
<!-- Material 12 -->
<div class="material-card">
<div class="material-thumb-wrap">
<img src="assets/images/material12.png" alt="Material: Crystal/Ice">
<div class="visual-tag">Material 12</div>
</div>
<div class="material-body">
<h4 class="material-title">Crystal / Ice</h4>
<p class="material-desc">Unique material with smooth surfaces, perfect for cover art.</p>
</div>
</div>
</div>
</section>
<!-- SECTION 2: COLOUR SYSTEMS & PALETTES (INTERACTIVE CARD DECK) -->
<section style="background: #0d0d0d; color: var(--white); padding: 120px 0;">
<div class="container">
<h3 class="white-heading" style="font-size: 2.8rem; margin-bottom: 15px;">Colour Systems & Palettes</h3>
<p style="font-size: 1.15rem; color: #888; max-width: 800px;">We map every element, bond, and energy profile directly to your exact hex codes. Click through the presets below to inspect dynamic layer interactions. Alternative presets can be developed as well.</p>
<div class="palette-interactive-stage">
<!-- Left Stepper Controls -->
<div class="palette-stepper" id="paletteStepper" style="border-right: #f4f4f5 solid 10px; border-top: #f4f4f5 solid 2px; border-bottom: #f4f4f5 solid 2px;">
<div class="stepper-node active" data-index="0" style="padding-top: 30px; padding-bottom: 20px; border-bottom: #f4f4f5 solid 2px;">
<div class="stepper-title">A. Academic Clean</div>
<div class="stepper-subtitle">Clean, standard preset.</div>
</div>
<div class="stepper-node" data-index="1" style="padding-top: 20px; padding-bottom: 20px; border-bottom: #f4f4f5 solid 2px;">
<div class="stepper-title">B. Dark Industrial</div>
<div class="stepper-subtitle">Charcoal backbone with neon heteroatoms.</div>
</div>
<div class="stepper-node" data-index="2" style="padding-top: 20px; padding-bottom: 20px; border-bottom: #f4f4f5 solid 2px;">
<div class="stepper-title">C. Muted Pastel</div>
<div class="stepper-subtitle">Calibrated soft tones; more gentle.</div>
</div>
<div class="stepper-node" data-index="3" style="padding-top: 20px; padding-bottom: 30px;">
<div class="stepper-title">D. Monochromatic</div>
<div class="stepper-subtitle">Pure structural form without unnecessary noise.</div>
</div>
</div>
<!-- Right Stacked Card Deck -->
<div class="deck-container" id="paletteDeck">
<!-- Card 0: Academic Clean -->
<div class="deck-card is-active">
<div class="deck-card-image">
<img src="assets/images/palette1.png" alt="Academic Clean Palette">
<div class="visual-tag">Preset: Academic Clean</div>
</div>
<div class="deck-card-content">
<h3 class="blue-heading" style="font-size: 1.6rem; margin-bottom: 15px;">Academic Clean</h3>
<p style="color: #444; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6;">Standard academic CPK palette optimised for supreme print & screen clarity.</p>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: #222;">
<div><strong>Carbon:</strong> <span class="swatch-inline"><span class="color-box" style="background: #333333;"></span> #333333</span></div>
<div><strong>Oxygen:</strong> <span class="swatch-inline"><span class="color-box" style="background: #ff0000;"></span> #ff0000</span></div>
<div><strong>Nitrogen:</strong> <span class="swatch-inline"><span class="color-box" style="background: #0000ff;"></span> #0000ff</span></div>
<div><strong>Background:</strong> <span class="swatch-inline"><span class="color-box" style="background: #f4f4f5;"></span> #f4f4f5</span></div>
</div>
</div>
</div>
<!-- Card 1: Dark Industrial -->
<div class="deck-card">
<div class="deck-card-image">
<img src="assets/images/palette2.png" alt="Dark Industrial Palette">
<div class="visual-tag">Preset: Dark Industrial</div>
</div>
<div class="deck-card-content">
<h3 class="red-heading" style="font-size: 1.6rem; margin-bottom: 15px;">Dark Industrial</h3>
<p style="color: #444; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6;">Engineered for dark mode applications with reactive accents.</p>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: #222;">
<div><strong>Carbon backbone:</strong> <span class="swatch-inline"><span class="color-box" style="background: #262626;"></span> #262626</span></div>
<div><strong>Heteroatoms:</strong> High-saturation luminescent neon markers</div>
</div>
</div>
</div>
<!-- Card 2: Muted Pastel -->
<div class="deck-card">
<div class="deck-card-image">
<img src="assets/images/palette3.png" alt="Muted Pastel Palette">
<div class="visual-tag">Preset: Muted Pastel</div>
</div>
<div class="deck-card-content">
<h3 class="blue-heading" style="font-size: 1.6rem; margin-bottom: 15px;">Muted Pastel</h3>
<p style="color: #444; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6;">Soft contemporary tones.</p>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: #222;">
<div><strong>Example colours:</strong></div>
<ul class="bullet-list">
<li style="font-size: 0.9rem; color: #222; margin-bottom: 5px;"><div>Cyan: <span class="swatch-inline"><span class="color-box" style="background: #a5f3fc;"></span> #a5f3fc</span></div></li>
<li style="font-size: 0.9rem; color: #222; margin-bottom: 5px;"><div>Coral: <span class="swatch-inline"><span class="color-box" style="background: #fecdd3;"></span> #fecdd3</span></div></li>
<li style="font-size: 0.9rem; color: #222; margin-bottom: 5px;"><div>Sage: <span class="swatch-inline"><span class="color-box" style="background: #bbf7d0;"></span> #bbf7d0</span></div></li>
<li style="font-size: 0.9rem; color: #222;"><div>Amber: <span class="swatch-inline"><span class="color-box" style="background: #fef08a;"></span> #fef08a</span></div></li>
</ul>
</div>
</div>
</div>
<!-- Card 3: Monochromatic -->
<div class="deck-card">
<div class="deck-card-image">
<img src="assets/images/palette4.png" alt="Monochromatic Palette">
<div class="visual-tag">Preset: Monochromatic</div>
</div>
<div class="deck-card-content">
<h3 class="red-heading" style="font-size: 1.6rem; margin-bottom: 15px;">Monochromatic</h3>
<p style="color: #444; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6;">Focuses entirely on structure rather than element categorisation.</p>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: #222;">
<div><strong>Custom colour:</strong> Select any single brand accent code</div>
<div style="margin-top: 10px; font-size: 0.85rem; color: #666;">* Complete bespoke presets can be engineered to your visual branding book.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 3: ATMOSPHERIC LIGHTING & ENVIRONMENT -->
<section class="container" style="padding: 100px 0;">
<h3 class="blue-heading" style="font-size: 2.8rem; margin-bottom: 15px;">Atmospheric Lighting</h3>
<p style="font-size: 1.15rem; color: #555; max-width: 800px; margin-bottom: 50px;">Control how light interacts with your scenes to create mood, depth, or pedagogical clarity.</p>
<div class="side-by-side-grid" style="margin-bottom: 30px;">
<div class="media-box" style="position: relative;">
<img src="assets/images/fog1.png" alt="Without Volumetric Fog">
<div class="visual-tag">Setup: Default Studio Lighting</div>
</div>
<div class="media-box" style="position: relative;">
<img src="assets/images/fog2.png" alt="With Volumetric Fog">
<div class="visual-tag">Setup: Volumetric Atmospheric Ray Cast</div>
</div>
</div>
<div style="text-align: center; margin-top: 60px;">
<a href="render.html" class="btn btn-blue" style="background: var(--black); color: white;">See Our Gallery for More Renders</a>
</div>
</section>
<!-- SECTION 4: OPTICAL & CAMERA MECHANICS (WITH BLUEPRINT GRID) -->
<section class="blueprint-grid" style="padding: 120px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;">
<div class="container">
<h3 class="red-heading" style="font-size: 2.8rem; margin-bottom: 15px;">Optical & Camera Mechanicss</h3>
<p style="font-size: 1.15rem; color: #555; max-width: 800px; margin-bottom: 60px;">Different focal lengths convey different information. Choose how your audience evaluates spatial and stereochemical relationships.</p>
<div class="grid-2" style="gap: 40px;">
<div style="border-left: 2px solid var(--black); padding-left: 25px;">
<h4 style="font-size: 1.3rem; margin-bottom: 10px;">Orthographic Projection</h4>
<p style="color: #444; line-height: 1.7;">Zero perspective distortion with parallel projection lines. Crucial when students must evaluate exact bond lengths, symmetry operations, or stereochemical projections without optical warping.</p>
</div>
<div style="border-left: 2px solid var(--black); padding-left: 25px;">
<h4 style="font-size: 1.3rem; margin-bottom: 10px;">Cinematic 50 mm Perspective</h4>
<p style="color: #444; line-height: 1.7;">Replicates natural human focal perception, providing a balanced, natural sense of 3D depth for presentations, website banners, and lecture slides.</p>
</div>
<div style="border-left: 2px solid var(--black); padding-left: 25px;">
<h4 style="font-size: 1.3rem; margin-bottom: 10px;">Macro 105 mm Shallow Depth-of-Field</h4>
<p style="color: #444; line-height: 1.7;">Pulls the focal plane directly onto the reacting centre (e.g. the carbon undergoing nucleophilic attack), throwing spectator groups into a soft, aesthetic blur.</p>
</div>
</div>
</div>
</section>
<!-- SECTION 5: CALLOUT CTA -->
<section class="container" style="padding: 120px 0; text-align: center; margin-bottom: 50px;">
<h2 style="font-size: 4rem; letter-spacing: -1.5px; margin: 0 auto 20px auto; font-weight: 900;">Have a specific vision?</h1>
<p style="font-size: 1.25rem; color: #555; max-width: 700px; margin: 0 auto 40px auto; line-height: 1.7;">Send us your hex codes, preferred typography, and target concept. We will construct a complimentary 3-second style test frame before you commission your project.</p>
<a href="contact.html" class="btn btn-blue" style="background: var(--blue); padding: 20px 45px; font-size: 1rem;">Let's Work Together</a>
</section>
</main>
<footer class="container footer-style">
© CHEMORPHIS STUDIO. ALL RIGHTS RESERVED. // THE PREMIER CHEMISTRY VISUALISATION TOOL
</footer>
<script>
// 1. Direction-Aware Smooth Card Deck Engine
const nodes = document.querySelectorAll('.stepper-node');
const cards = document.querySelectorAll('.deck-card');
let currentIndex = 0;
function updateDeck(targetIndex) {
cards.forEach((card, i) => {
// High-performance smooth cubic curve
card.style.transition = 'transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease';
if (i === targetIndex) {
// Active top card
card.style.transform = 'translateY(0) scale(1) rotate(0deg)';
card.style.opacity = '1';
card.style.zIndex = '10';
card.classList.add('is-active');
} else if (i > targetIndex) {
// Cards layered behind the active card
const depth = i - targetIndex;
const y = depth * 14;
const scale = 1 - (depth * 0.035);
const rot = (depth % 2 === 0 ? 1 : -1) * (depth * 0.8);
card.style.transform = `translateY(${y}px) scale(${scale}) rotate(${rot}deg)`;
card.style.opacity = `${Math.max(0.3, 1 - depth * 0.25)}`;
card.style.zIndex = `${10 - depth}`;
card.classList.remove('is-active');
} else {
// Cards before active (smoothly tucked behind with subtle offset)
card.style.transform = 'translateY(-12px) scale(0.97) rotate(-0.5deg)';
card.style.opacity = '0';
card.style.zIndex = '1';
card.classList.remove('is-active');
}
});
nodes.forEach((node, i) => {
node.classList.toggle('active', i === targetIndex);
});
currentIndex = targetIndex;
}
nodes.forEach((node) => {
node.addEventListener('click', () => {
const index = parseInt(node.getAttribute('data-index'));
updateDeck(index);
});
});
// Initialize at first card
updateDeck(0);
// 2. Mobile Nav Scroll & Arrow Collapse Logic
const nav = document.querySelector('nav');
const arrow = document.getElementById('navArrow');
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');
});
}
</script>
</body>