Skip to content

Commit 20e483e

Browse files
swasthikshetty10swasthikshetty10
committed
feat: rive animation
1 parent ad04678 commit 20e483e

File tree

6 files changed

+121
-80
lines changed

6 files changed

+121
-80
lines changed

Diff for: ‎package-lock.json

+17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@livekit/components-styles": "0.2.0",
1515
"@next-auth/prisma-adapter": "^1.0.5",
1616
"@prisma/client": "^4.9.0",
17+
"@rive-app/react-canvas": "^3.0.38",
1718
"@tanstack/react-query": "^4.20.2",
1819
"@trpc/client": "^10.9.0",
1920
"@trpc/next": "^10.9.0",

Diff for: ‎public/hero.riv

29.5 KB
Binary file not shown.

Diff for: ‎src/pages/_app.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const MyApp: AppType<{ session: Session | null }> = ({
1919
<title>Jab We Meet</title>
2020
<link rel="icon" href="/favicon.ico" />
2121
</Head>
22+
2223
<Component {...pageProps} />
2324
</SessionProvider>
2425
);

Diff for: ‎src/pages/index.tsx

+87-80
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @refresh reset
12
import type { NextPage } from "next";
23
import { useSession } from "next-auth/react";
34
import { useRouter } from "next/router";
@@ -10,12 +11,22 @@ import JoinRoom from "~/components/join";
1011
import Image from "next/image";
1112
import Features from "~/components/features";
1213
import CharacterAnimation from "~/components/animation/character";
14+
import { useRive, Layout, Fit, Alignment } from "@rive-app/react-canvas";
1315

1416
function ConnectionTab() {
1517
const { data: session, status } = useSession();
1618
const createRoom = api.rooms.createRoom.useMutation();
1719
const router = useRouter();
20+
const { RiveComponent: Hero } = useRive({
21+
src: `hero.riv`,
22+
stateMachines: ["State Machine 1"],
23+
autoplay: true,
24+
layout: new Layout({
25+
fit: Fit.FitWidth,
1826

27+
alignment: Alignment.Center,
28+
}),
29+
});
1930
const createRoomHandler = async () => {
2031
const data = await createRoom.mutateAsync();
2132
router.push(`/rooms/${data.roomName}`);
@@ -26,93 +37,89 @@ function ConnectionTab() {
2637
return (
2738
<>
2839
<Navbar status={status} session={session} />
29-
<div className="isolate flex h-screen w-screen flex-col items-center justify-center space-y-4 p-5 text-center md:flex-row">
30-
<div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden opacity-60 blur-3xl sm:top-[-20rem]">
31-
<svg
32-
className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
33-
viewBox="0 0 1155 678"
34-
fill="none"
35-
xmlns="http://www.w3.org/2000/svg"
36-
>
37-
<path
38-
fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
39-
fillOpacity=".3"
40-
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
41-
/>
42-
<defs>
43-
<linearGradient
44-
id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
45-
x1="1155.49"
46-
x2="-78.208"
47-
y1=".177"
48-
y2="474.645"
49-
gradientUnits="userSpaceOnUse"
50-
>
51-
<stop stopColor="#9089FC" />
52-
<stop offset={1} stopColor="#FF80B5" />
53-
</linearGradient>
54-
</defs>
55-
</svg>
56-
</div>
40+
<main className="overflow-hidden">
41+
<div className="isolate flex h-screen w-screen flex-col items-center justify-center space-y-4 p-5 text-center md:flex-row">
42+
<div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden opacity-60 blur-3xl sm:top-[-20rem]">
43+
<svg
44+
className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
45+
viewBox="0 0 1155 678"
46+
fill="none"
47+
xmlns="http://www.w3.org/2000/svg"
48+
>
49+
<path
50+
fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
51+
fillOpacity=".3"
52+
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
53+
/>
54+
<defs>
55+
<linearGradient
56+
id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
57+
x1="1155.49"
58+
x2="-78.208"
59+
y1=".177"
60+
y2="474.645"
61+
gradientUnits="userSpaceOnUse"
62+
>
63+
<stop stopColor="#9089FC" />
64+
<stop offset={1} stopColor="#FF80B5" />
65+
</linearGradient>
66+
</defs>
67+
</svg>
68+
</div>
5769

58-
<div className="w-full max-w-md space-y-4">
59-
<Typing />
70+
<div className="w-full max-w-md space-y-4">
71+
<Typing />
6072

61-
<CharacterAnimation
62-
className="flex justify-center"
63-
textStyle="text-sm text-gray-400"
64-
text="Multilingual Video Conferencing App"
65-
/>
73+
<CharacterAnimation
74+
className="flex justify-center"
75+
textStyle="text-sm text-gray-400"
76+
text="Multilingual Video Conferencing App"
77+
/>
6678

67-
<div className="flex flex-col items-center space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
68-
<button onClick={createRoomHandler} className="lk-button h-fit">
69-
<AiOutlineVideoCameraAdd />
70-
<CharacterAnimation text="Create Room" textStyle="text-sm" />
71-
</button>
79+
<div className="flex flex-col items-center space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
80+
<button onClick={createRoomHandler} className="lk-button h-fit">
81+
<AiOutlineVideoCameraAdd />
82+
<CharacterAnimation text="Create Room" textStyle="text-sm" />
83+
</button>
7284

73-
<JoinRoom />
74-
</div>
85+
<JoinRoom />
86+
</div>
7587

76-
<Features />
77-
</div>
88+
<Features />
89+
</div>
7890

79-
<div className="flex w-full max-w-md items-center justify-center">
80-
<Image
81-
src={"assets/hero-image.svg"}
82-
alt="Hero Image"
83-
width={500}
84-
height={500}
85-
priority
86-
/>
87-
</div>
88-
<div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden opacity-60 blur-3xl sm:top-[calc(100%-30rem)]">
89-
<svg
90-
className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
91-
viewBox="0 0 1155 678"
92-
fill="none"
93-
xmlns="http://www.w3.org/2000/svg"
94-
>
95-
<path
96-
fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
97-
fillOpacity=".3"
98-
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
99-
/>
100-
<defs>
101-
<linearGradient
102-
id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc"
103-
x1="1155.49"
104-
x2="-78.208"
105-
y1=".177"
106-
y2="474.645"
107-
gradientUnits="userSpaceOnUse"
108-
>
109-
<stop stopColor="#9089FC" />
110-
<stop offset={1} stopColor="#FF80B5" />
111-
</linearGradient>
112-
</defs>
113-
</svg>
91+
<div className="flex w-full max-w-md items-center justify-center">
92+
<Hero className="h-[40vh] w-full md:h-screen" />
93+
</div>
94+
<div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden opacity-60 blur-3xl sm:top-[calc(100%-30rem)]">
95+
<svg
96+
className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
97+
viewBox="0 0 1155 678"
98+
fill="none"
99+
xmlns="http://www.w3.org/2000/svg"
100+
>
101+
<path
102+
fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
103+
fillOpacity=".3"
104+
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
105+
/>
106+
<defs>
107+
<linearGradient
108+
id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc"
109+
x1="1155.49"
110+
x2="-78.208"
111+
y1=".177"
112+
y2="474.645"
113+
gradientUnits="userSpaceOnUse"
114+
>
115+
<stop stopColor="#9089FC" />
116+
<stop offset={1} stopColor="#FF80B5" />
117+
</linearGradient>
118+
</defs>
119+
</svg>
120+
</div>
114121
</div>
115-
</div>
122+
</main>
116123
</>
117124
);
118125
}

Diff for: ‎src/pages/profile.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useSession } from "next-auth/react";
2+
import { useRouter } from "next/router";
3+
4+
function profile() {
5+
const { data: session, status } = useSession();
6+
const router = useRouter();
7+
8+
if (status === "loading") return <div>Loading...</div>;
9+
if (!session && status === "unauthenticated")
10+
return router.push("/api/auth/signin");
11+
12+
return <div className="flex"></div>;
13+
}
14+
15+
export default profile;

0 commit comments

Comments
 (0)