MorphFooter Component
Documentation, preview, and source code.
About
Independent design engineer building interactive UI components.
Links
- GitHub
Contact
donjoeh@gmail.com
DESIGNING
SINCE 2025
Installation
1npm install motion
2npm install Textfit1npm install motion
2npm install TextfitUsage
1import React from 'react'
2import AnimatedFooter from '../custom-components/MorphFooter'
3
4function MorphFooterdemo() {
5 return (
6 <div>
7 {/* Normal footer content */}
8 <div className="max-w-6xl mx-auto">
9 <div className="grid md:grid-cols-3 gap-12 text-sm">
10
11 <div>
12 <h3 className="font-semibold mb-4">About</h3>
13 <p className="text-muted-foreground">
14 Independent design engineer building interactive UI components.
15 </p>
16 </div>
17
18 <div>
19 <h3 className="font-semibold mb-4">Links</h3>
20 <ul className="space-y-2 text-muted-foreground">
21 <li>GitHub</li>
22 <li>LinkedIn</li>
23 <li>Twitter</li>
24 </ul>
25 </div>
26
27 <div>
28 <h3 className="font-semibold mb-4">Contact</h3>
29 <p className="text-muted-foreground">
30 demo@gmail.com
31 </p>
32 </div>
33
34 </div>
35 </div>
36
37 {/* Morphing footer */}
38 <AnimatedFooter
39 firstWord="BUILDING"
40 secondWord="SINCE 2025"
41/>
42 </div>
43 )
44}
45
46export default MorphFooterdemo1import React from 'react'
2import AnimatedFooter from '../custom-components/MorphFooter'
3
4function MorphFooterdemo() {
5 return (
6 <div>
7 {/* Normal footer content */}
8 <div className="max-w-6xl mx-auto">
9 <div className="grid md:grid-cols-3 gap-12 text-sm">
10
11 <div>
12 <h3 className="font-semibold mb-4">About</h3>
13 <p className="text-muted-foreground">
14 Independent design engineer building interactive UI components.
15 </p>
16 </div>
17
18 <div>
19 <h3 className="font-semibold mb-4">Links</h3>
20 <ul className="space-y-2 text-muted-foreground">
21 <li>GitHub</li>
22 <li>LinkedIn</li>
23 <li>Twitter</li>
24 </ul>
25 </div>
26
27 <div>
28 <h3 className="font-semibold mb-4">Contact</h3>
29 <p className="text-muted-foreground">
30 demo@gmail.com
31 </p>
32 </div>
33
34 </div>
35 </div>
36
37 {/* Morphing footer */}
38 <AnimatedFooter
39 firstWord="BUILDING"
40 secondWord="SINCE 2025"
41/>
42 </div>
43 )
44}
45
46export default MorphFooterdemo