https://hyacinth.onrender.com/

1<!doctype html>
2<html class="dark" lang="en" data-critters-container>
3
4<head>
5  <meta charset="utf-8">
6  <title>Hyacinth Labs | Next Generation Product Studio</title>
7  <base href="/">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  <!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->
10  <link rel="icon" type="image/x-icon" href="/assets/planet.svg">
11
12
13  <!-- CSS -->
14  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
15  <!-- JavaScript -->
16  

16<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

16
17
18
19  

19<script src="https://cdn.tailwindcss.com"></script>

19
20  <!-- CSS -->
21  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
22  <!-- JavaScript -->
23  

23<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

23
24
25  <link rel="preconnect" href="https://fonts.googleapis.com">
26  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
27  <style type="text/css">@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/gloock/v8/Iurb6YFw84WUY4NJhRakJLRBjIlJ.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/gloock/v8/Iurb6YFw84WUY4NJhhakJLRBjIlJ.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/gloock/v8/Iurb6YFw84WUY4NJiBakJLRBjA.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
28
29
30  <meta property="og:image" content="/assets/preview.JPG">
31
32  

32<script>

32
33    (function (h, o, t, j, a, r) {
34      h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
35      h._hjSettings = { hjid: 

353647800

35, hjsv: 6 };
36      a = o.getElementsByTagName('head')[0];
37      r = o.createElement('script'); r.async = 1;
38      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
39      a.appendChild(r);
40    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
41  

41</script>

41
42
43
44  

44<script>
45
46    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
47    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
48      document.documentElement.classList.add('dark')
49    } else {
50      document.documentElement.classList.remove('dark')
51    }
52
53    // Whenever the user explicitly chooses light mode
54    localStorage.theme = 'light'
55
56    // Whenever the user explicitly chooses dark mode
57    localStorage.theme = 'dark'
58
59    // Whenever the user explicitly chooses to respect the OS preference
60    localStorage.removeItem('theme')
61  </script>

61
62  <style>
63    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
64    /* .prgrad
65  {
66    background: linear-gradient(225deg, rgba(0, 71, 137, 0.5) -14.85%, rgba(167, 98, 184, 0.5) 54.95%, rgba(249, 209, 255, 0.5) 123.32%); */
67    /* background-image: url('/assets/slide1.png'); */
68    /* background: linear-gradient(225deg, rgba(0, 71, 137, 0.5) -14.85%, rgba(167, 98, 184, 0.5) 54.95%, rgba(249, 209, 255, 0.5) 123.32%), url('/assets/slide1.png'); */
69    /* background-repeat: no-repeat; background-position: 110% -10%; */
70    /* background-size: 50%; */
71    /* border: 1px solid #FFFFFF;
72  } */
73
74
75    .prgradrich:hover {
76      transform: scale(1.1);
77    }
78
79    .flickity-page-dots {
80      bottom: -3rem;
81    }
82
83    .flickity-page-dots .dot {
84      width: 12px;
85      height: 12px;
86      opacity: 1;
87      background: rgba(255, 255, 255, 0.187);
88      border: solid 2px rgba(255, 255, 255, 0.454);
89    }
90
91
92    .flickity-page-dots .dot.is-selected {
93      background: white;
94    }
95
96    .flickity-viewport {
97      /* height: 800px !important; */
98    }
99
100    .flickity-button-icon {
101      fill: white !important;
102    }
103
104
105
106    .flickity-button:hover {
107      background-color: rgba(255, 255, 255, 0.25) !important;
108    }
109
110    /* Set the background color of the previous and next buttons */
111    .flickity-prev-next-button {
112      background-color: #000;
113      /* black */
114    }
115
116    flickity-button flickity-prev-next-button next
117
118    /* Set the color of the previous and next button arrows */
119    .flickity-prev-next-button svg {
120      fill: #fff !important;
121    }
122
123
124
125    .glass-panel {
126      color: #fff;
127      /* margin: 40px auto; */
128      background-color: rgba(255, 255, 255, 0.06);
129      border: 1px solid rgba(255, 255, 255, 0.1);
130      width: 100%;
131      border-radius: 15px;
132      padding: 32px;
133      /* backdrop-filter: blur(10px); */
134      /* backdrop-filter: blur(4px); */
135      cursor: pointer;
136    }
137
138    .glass-panel:hover {
139      background-color: rgba(255, 255, 255, 0.1);
140    }
141
142    .glass-panel-dark {
143      color: #fff;
144      background-color: rgb(24, 24, 24);
145      border: 1px solid rgba(255, 255, 255, 0.1);
146      width: 100%;
147      border-radius: 15px;
148      padding: 32px;
149      cursor: pointer;
150    }
151
152    .glass-panel-dark:hover {
153      background-color: rgb(44, 44, 44);
154    }
155
156
157    .circle {
158      width: 16px;
159      height: 16px;
160      border-radius: 50%;
161      border: 2px solid #000;
162      position: relative;
163      animation: circle-strobe 3s infinite;
164      background-color: white;
165      display: inline-block;
166      /* vertical-align: top; */
167    }
168
169    @keyframes circle-strobe {
170      0% {
171        opacity: 0;
172      }
173
174      50% {
175        opacity: 1;
176      }
177
178      100% {
179        opacity: 0;
180      }
181    }
182
183    * {
184      /* transition: 0.25s; */
185      scroll-behavior: smooth;
186
187      -webkit-tap-highlight-color: transparent;
188      -webkit-touch-callout: none;
189    }
190
191    /* .hovercard li::before */
192    .hovercard li,
193    .check {
194      /* content: ' ';
195        width: 32px;
196        height: 32px;
197        background-image: url("/assets/check.svg");
198        list-style: none; */
199      list-style-image: url("/assets/check.svg");
200    }
201
202    ::-moz-selection {
203      /* Code for Firefox */
204      /* color: rgb(255, 255, 255); */
205      background: rgba(205, 142, 236, 0.429);
206    }
207
208    ::selection {
209      /* color: rgb(255, 255, 255); */
210      background: rgba(205, 142, 236, 0.429);
211    }
212
213    .hovercard {
214      /* height: 0px; */
215      opacity: 0;
216      position: absolute;
217      background-color: rgb(24, 24, 24);
218      border: 1px solid rgba(255, 255, 255, 0.386);
219      border-radius: 1em;
220      padding: 1em;
221      font-size: 0.8em;
222      cursor: default;
223      transform-origin: 50% 0%;
224
225      transform: perspective(1500px) rotateX(-60deg);
226
227      width: 300px;
228
229
230
231    }
232
233    .showcard:hover .hovercard {
234
235      transform-origin: 50% 0%;
236
237      opacity: 1;

238      transform: perspective(1500px) rotateX(0deg);
239
240      /* height: auto; */
241    }
242
243    .showcard {
244      cursor: pointer;
245      -webkit-user-select: none;
246      /* Safari */
247      -ms-user-select: none;
248      /* IE 10 and IE 11 */
249      user-select: none;
250      /* Standard syntax */
251
252
253    }
254
255    .showcard:hover {
256      transform: scale(1.05);
257    }
258
259    .bgmain {
260      background-image: url("assets/bg1.svg"), url("assets/bg1.svg");
261      /* background-size: contain; */
262      background-repeat: no-repeat;
263    }
264
265    .bgmore {
266      background-image: url("assets/cover.svg");
267      /* background-size: 50%; */
268      background-repeat: no-repeat;
269      /* background-repeat: no-repeat; */
270    }
271
272    .more {
273      background-image: url(assets/splines.svg);
274      background-repeat: no-repeat;
275    }
276
277    .spline:after {
278      background-image: url(assets/splines.svg);
279      /* width: 685px; */
280      width: 800px;
281      opacity: 0.5;
282      height: 400px;
283      background-size: 50%;
284      content: '';
285      position: absolute;
286      background-repeat: no-repeat;
287      /* right: 0; */
288      /* top: 100%; */
289      transform: translateY(-50%);
290      /* margin-top: -50%; */
291      z-index: -10;
292      /* animation: 0.25s fadein; */
293    }
294
295    @media screen and (max-width: 480px) {
296      .bgmain {
297        /* background-size: 10%; */
298        /* background-size:; */
299        background-size: 125%;
300      }
301    }
302
303    @media screen and (min-width: 480px) {
304
305      /* phones yeah */
306      .bgmain {
307        /* background-size:auto; */
308        background-size: 60%;
309        /* background-size: 100%; */
310      }
311
312    }
313
314    /*
315      ::-moz-selection {
316  color: rgb(255, 255, 255);
317  background: rgba(212, 104, 255, 0.186);
318}
319
320::selection {
321  color: rgb(255, 255, 255);
322  background: rgba(212, 104, 255, 0.186);
323
324} */
325
326    .tgrad {
327      /* background: -webkit-linear-gradient(268.72deg, #B7FFFB -113.02%, #A762B8 3.66%, #F9D1FF 120.34%); */
328
329      background: -webkit-linear-gradient(268.72deg, #B7FFFB -113.02%, #A762B8 3.66%, #F9D1FF 120.34%);
330
331      -webkit-background-clip: text;
332      -webkit-text-fill-color: transparent;
333    }
334
335    textarea::placeholder {
336      /* Chrome, Firefox, Opera, Safari 10.1+ */
337      color: red;
338      opacity: 1;
339      /* Firefox */
340    }
341
342    textarea:-ms-input-placeholder {
343      /* Internet Explorer 10-11 */
344      color: red;
345    }
346
347    textarea::-ms-input-placeholder {
348      /* Microsoft Edge */
349      color: red;
350    }
351
352    .grad {
353      background: linear-gradient(268.72deg, #B7FFFB -113.02%, #A762B8 3.66%, #F9D1FF 120.34%);
354    }
355
356    .bg {
357      background-image: url('assets/bg.png');
358      background-size: contain;
359      background-repeat: no-repeat;
360    }
361
362    .reveal {
363      /* position: relative; */
364      /* transform: translateY(1em); */
365      /* opacity: 0; */
366      /* transition: 0.5s all ease; */
367      animation: 0.25s appear;
368    }
369
370    @keyframes appear {
371      from {
372        opacity: 0;
373        transform: translateY(1em);
374
375      }
376
377      to {
378        opacity: 1;
379        transform: translateY(0em);
380      }
381    }
382
383    html {
384      min-height: 100%;
385      position: relative;
386    }
387
388    body {
389      /* background-image: url("assets/flow.svg");
390    background-size: cover; */
391      height: 100% !important;
392      /* force the BODY element to match the height of the HTML element */
393
394    }
395
396    @keyframes fadein {
397      from {
398        opacity: 0;
399
400      }
401
402      to {
403        opacity: 1;
404      }
405    }
406
407    .active {
408      opacity: 1;
409      /* font-weight: bold; */
410    }
411
412    /* .reveal.active
413      {
414          transform: translateY(0);
415          opacity: 1;
416      } */
417    .glass {
418      -webkit-backface-visibility: hidden;
419      -webkit-perspective: 1000;
420      -webkit-transform: translate3d(0, 0, 0);
421      -webkit-transform: translateZ(0);
422      backface-visibility: hidden;
423      perspective: 1000;
424      transform: translate3d(0, 0, 0);
425      transform: translateZ(0);
426
427      /* background-color: rgba(0, 0, 0, 0); */
428      z-index: 1000;
429      /* -webkit-backdrop-filter: blur(12px); */
430      /* backdrop-filter: blur(12px); */
431      position: fixed;
432      width: 100%;
433      top: 0;
434      display: block;
435
436      border-bottom: 1px solid rgba(255, 255, 255, 0.276);
437
438      backdrop-filter: saturate(600%) blur(12px);
439
440      /* background-color: hsla(0,0%,100%,.72); */
441      background-color: rgba(0, 0, 0, 0.553);
442      /* background-color: rgba(0, 0, 0, 0.171); */
443
444    }
445
446
447    .glass1 {
448      width: 100%;
449      display: block;
450
451      border-bottom: 1px solid rgba(255, 255, 255, 0.276);
452
453      backdrop-filter: blur(12px);
454
455      /* background-color: hsla(0,0%,100%,.72); */
456      background-color: rgba(0, 0, 0, 0.171);

457
458    }
459
460    .projectbg {
461      /* background-color: rgb(135, 135, 135) !important; */
462      /* background: linear-gradient(2.48deg, #000000 -12.2%, #004789 36.24%, #A762B8 122.07%, #F9D1FF 253.57%); */
463      /* background: linear-gradient(180deg, #F9D1FF -79.56%, #A762B8 -2.87%, #001121 100%); */
464      /* background: linear-gradient(180deg, #F9D1FF -79.56%, #A762B8 -13.96%, #001121 74.03%); */
465      /* background: linear-gradient(180deg, #F9D1FF -79.56%, #A762B8 -24.11%, #001121 50.28%); */
466      /* background: linear-gradient(180deg, #F9D1FF -72.1%, #A762B8 -4.03%, #000000 87.29%); */
467      background: linear-gradient(180deg, #f9d1ff75 -72.1%, #a762b8f6 -4.03%, #000000 87.29%);
468      width: 100%;
469      position: absolute;
470      z-index: -100;
471      height: 100%;
472      left: 0;
473      right: 0;
474      top: 0;
475      bottom: 0;
476    }
477
478    .projectbg1 {
479      background: linear-gradient(180deg, #f9d1ff75 -72.1%, #a762b8f6 -4.03%, #000000 87.29%);
480      width: 100%;
481      position: absolute;
482      z-index: -100;
483      height: 100%;
484      left: 0;
485      right: 0;
486      top: 0;
487      bottom: 0;
488    }
489
490
491    .bg1 {
492      background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070');
493      background-size: cover;
494      background-position: 0% 100%;
495    }
496
497    .grad1 {
498      background: linear-gradient(105.82deg, #004789 -78.81%, #A762B8 27.11%, #F9D1FF 130.85%) !important;
499      border: none;
500      /* border: 2px solid rgba(142, 83, 157, 0.8); */
501    }
502
503    .slider {
504      -webkit-appearance: none;
505      width: 100%;
506      height: 25px;
507      background: #f0f0f0;
508      outline: none;
509      opacity: 0.7;
510      -webkit-transition: .2s;
511      transition: opacity .2s;
512      border-radius: 4px;
513    }
514
515    .slider::-webkit-slider-thumb {
516      -webkit-appearance: none;
517      appearance: none;
518      width: 32px;
519      height: 32px;
520      background: #8b44a7;
521      cursor: pointer;
522      border-radius: 100%;
523    }
524
525    .path-arrow:hover path {}
526
527    .path-arrow:hover {
528      transform: scale(1.1);
529    }
530
531    .pscreen {
532      perspective: 1px;
533      height: 100vh;
534      overflow: auto;
535    }
536
537    .base {
538      perspective: 1px;
539      height: 100px;
540      overflow: auto;
541    }
542
543    .player {
544      animation: spin 60s infinite linear;
545      /* transform: translateZ(-4px); */
546      position: absolute;
547    }
548
549    @keyframes spin {
550      from {
551        transform: rotate(0deg) translateZ(-2px);
552      }
553
554      to {
555        transform: rotate(360deg) translateZ(-2px);
556      }
557
558    }
559
560    .iconcards .showcard {
561      margin-right: 1em;
562    }
563
564    .iconcards * {
565      vertical-align: middle;
566    }
567
568    .fgrad {
569      background: linear-gradient(238.6deg, rgba(0, 0, 0, 0) 31.05%, #74215D 94.38%);
570    }
571
572    .etlones svg {
573      display: inline-block;
574      width: 100%;
575      margin-bottom: 1em;
576    }
577
578    .edgetool {
579      margin-left: -80%;
580    }
581
582    @media only screen and (max-width: 600px) {
583      .edgetool {
584        margin-left: 0%;
585      }
586    }
587  </style>
588
589<style>body{font-family:Roboto!important;background-color:#23162b!important;background-image:url(grid.5effcb92538eafff.svg);background-repeat:repeat;background-size:auto;overflow-x:hidden}html,body{cursor:url(/assets/stripe-icon.svg)!important}*:not(.no-transitions *){transition:.25s}</style><link rel="stylesheet" href="styles.b925dd7cb6fa4dd1.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.b925dd7cb6fa4dd1.css"></noscript></head>
590
591<body class="bg-black text-white">
592
593  <!-- <div class="pscreen"> -->
594  <!-- <img class="player absolute" src="/assets/prism.svg" alt="" srcset=""> -->
595  <app-root></app-root>
596  <!-- </div> -->
597
598
599  <!-- Disabled for Development -->
600  

600<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/26024279.js"></script>

600

601<script src="runtime.52c2b502f6cb087a.js" type="module"></script>

601<script src="polyfills.0b3ac62f8ad2f833.js" type="module"></script>

601<script src="main.9af1fb0563454280.js" type="module"></script>

601</body>
602
603
604

605<script>
606
607  function reveal() {
608    var reveals = document.querySelectorAll(".reveal");
609
610    for (var i = 0; i < reveals.length; i++) {
611      var windowHeight = window.innerHeight;
612      var elementTop = reveals[i].getBoundingClientRect().top;
613      var elementVisible = 150;
614
615      if (elementTop < windowHeight - elementVisible) {
616        reveals[i].classList.add("active");
617      } else {
618        reveals[i].classList.remove("active");
619      }
620    }
621  }
622
623  window.addEventListener("scroll", reveal);
624
625  reveal();
626</script>

626
627

628<script defer>
629  reveal();
630
631  function openc() {
632    document.getElementById('hubspot-messages-iframe-container').click();
633  }
634</script>

634
635

636<script async c6="https://conversate-ai.hyacinth.studio" c4="min" c5="15" c1 c2="https://conversate-ai.hyacinth.studio/static/close.svg" c3="https://conversate-ai.hyacinth.studio/embed/23" expand="https://conversate-ai.hyacinth.studio/static/expand.svg" src="https://conversate-ai.hyacinth.studio/static/god.js"></script>

636
637
638<!-- 

638<script async c1="https://conversate-i55c.onrender.com/static/icon.svg" c2="https://conversate-i55c.onrender.com/static/close.svg" c3="https://conversate-i55c.onrender.com/embed/8" c4="https://conversate-i55c.onrender.com/static/stars.svg"
639expand="https://conversate-i55c.onrender.com/static/expand.svg"
640src="https://conversate-i55c.onrender.com/static/code_embed.js">
641</script>

641 -->
642
643
644
645
646
647</html>