chore: add cool title effect

Vibrant-Colors · Dec 15, 2024 · 1a9b48f · 1a9b48f
1 parent 4c57b6c
commit 1a9b48f
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 17 deletions.
diff --git a/public/title_blob.svg b/public/title_blob.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,8 @@
 import {ChangeEvent, useState} from 'react';
 import styles from './App.module.css';
-import { Colors } from './Colors';
-import { Images } from './Images';
+import {Colors} from './Colors';
+import {Images} from './Images';
+import {Title} from "./title.tsx";
 
 const App = () => {
 
@@ -13,28 +14,32 @@ const App = () => {
     setImage(fileURL)
   }
 
-    /**
-     * @ToDo
-     * Change string file path to image so binding won't fail due to paths
-     */
+  /**
+   * @ToDo
+   * Change string file path to image so binding won't fail due to paths
+   */
 
   return (
-    <div className={styles.app}>
+    <div>
+
+    <Title title={"Vibrant"}/>
 
-        <Colors file={image} className={styles.fullSize} />
+    <div className={styles.app}>
+      <Colors file={image} className={styles.fullSize}/>
 
-        <div className={`${styles.fullSize} ${styles.flex}`}>
-            <label htmlFor="file-upload" className={styles.button}>
-                Choose Image...
-            </label>
-            <input id="file-upload" type="file" onChange={onChange}/>
-        </div>
+      <div className={`${styles.fullSize} ${styles.flex}`}>
+        <label htmlFor="file-upload" className={styles.button}>
+          Choose Image...
+        </label>
+        <input id="file-upload" type="file" onChange={onChange}/>
+      </div>
 
-       <Colors file={Images.PeacockFeathers} />
-       <Colors file={Images.IrelandPark} />
+      <Colors file={Images.PeacockFeathers}/>
+      <Colors file={Images.IrelandPark}/>
 
+      </div>
     </div>
-  );
+    );
 }
 
 export default App;
diff --git a/src/title.tsx b/src/title.tsx
@@ -0,0 +1,36 @@
+interface TitleProps {
+  title: string;
+}
+
+export const Title = ({title}: TitleProps) => {
+  const titleLength = title.length;
+  const svgWidth = titleLength * 85; // Adjust multiplier as needed
+  const svgHeight = 250;
+
+  return (
+    <div style={{position: "relative", maxWidth: "1200px", margin: "0 auto", width: "100%"}}>
+      <svg
+        width={"100%"} viewBox={`0 0 ${svgWidth} ${svgHeight}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <clipPath id="textClip">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  style={{transform: "translate(20%, 0%)"}}
+                  d="M229.346 4.55498C355.281 29.5933 425.293 147.645 370.785 206.007C323.101 257.063 262.072 194.01 193.395 180.478C122.857 166.579 33.3513 204.321 4.50831 140.756C-24.3347 77.191 103.412 -20.4833 229.346 4.55498Z"
+                  fill="#CF9D13"/>
+          </clipPath>
+        </defs>
+        <rect width="100%" height="100%" fill="#CF9D13" clip-path="url(#textClip)" />
+        <text x="50%" y="80%" dominant-baseline="middle" text-anchor="middle" font-size="9rem" font-weight="800" fill="#2A3751">
+          {title}
+        </text>
+        <text style={{userSelect: 'none'}} x="50%" y="80%" dominant-baseline="middle" text-anchor="middle" font-size="9rem" font-weight="800" fill="#ffff26" clip-path="url(#textClip)">
+          {title}
+        </text>
+      </svg>
+
+      <h1 style={{
+        visibility: "hidden",
+      }}>{title}</h1>
+    </div>
+  );
+}