diff --git a/Components/Text-Animations/Frozen-Text-Animation/assets/background.jpg b/Components/Text-Animations/Frozen-Text-Animation/assets/background.jpg
new file mode 100644
index 00000000..a006400b
Binary files /dev/null and b/Components/Text-Animations/Frozen-Text-Animation/assets/background.jpg differ
diff --git a/Components/Text-Animations/Frozen-Text-Animation/assets/ice.jpg b/Components/Text-Animations/Frozen-Text-Animation/assets/ice.jpg
new file mode 100644
index 00000000..21f9fc95
Binary files /dev/null and b/Components/Text-Animations/Frozen-Text-Animation/assets/ice.jpg differ
diff --git a/Components/Text-Animations/Frozen-Text-Animation/index.html b/Components/Text-Animations/Frozen-Text-Animation/index.html
new file mode 100644
index 00000000..baaf4cc4
--- /dev/null
+++ b/Components/Text-Animations/Frozen-Text-Animation/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ Frozen Text Animation
+
+
+
+
+ Beautiify
+
+
+
+
+
diff --git a/Components/Text-Animations/Frozen-Text-Animation/script.js b/Components/Text-Animations/Frozen-Text-Animation/script.js
new file mode 100644
index 00000000..44a76081
--- /dev/null
+++ b/Components/Text-Animations/Frozen-Text-Animation/script.js
@@ -0,0 +1,5 @@
+var h1 = document.querySelector("h1");
+
+h1.addEventListener("input", function() {
+ this.setAttribute("data-heading", this.innerText);
+});
\ No newline at end of file
diff --git a/Components/Text-Animations/Frozen-Text-Animation/style.css b/Components/Text-Animations/Frozen-Text-Animation/style.css
new file mode 100644
index 00000000..e0ec06f1
--- /dev/null
+++ b/Components/Text-Animations/Frozen-Text-Animation/style.css
@@ -0,0 +1,39 @@
+body {
+ background: linear-gradient(to bottom, #000428, #004e92), url("assets/background.jpg");
+ background-blend-mode: saturation;
+ background-size: cover;
+}
+
+div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ position: relative;
+}
+
+h1 {
+ transform: translate(0, -40%);
+ font-size: calc(20vw + 0.5rem);
+ font-family: "frozen", serif;
+ background-image: url("assets/ice.jpg");
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-size: contain;
+ position: relative;
+ -webkit-text-stroke: 1px #4f90ab;
+}
+
+@keyframes shine {
+ 0% {
+ background-position: -120%;
+ }
+
+ 10% {
+ background-position: 120%;
+ }
+
+ 100% {
+ background-position: 120%;
+ }
+}
diff --git a/assets/html_files/text-animations.html b/assets/html_files/text-animations.html
index 289be144..51305936 100644
--- a/assets/html_files/text-animations.html
+++ b/assets/html_files/text-animations.html
@@ -200,6 +200,19 @@ Fog Text Animation
+
+
Frozen Text Animation
+
+
+
+
+ 
+
+