-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Google Fonts
Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
You can get the model from here
/* Auto-generated by: https://github.com/pmndrs/gltfjsx */ import { useGLTF, useScroll } from "@react-three/drei"; import { useFrame } from "@react-three/fiber"; import gsap from "gsap"; import React, { useLayoutEffect, useRef } from "react"; export const FLOOR_HEIGHT = 2.3; export const NB_FLOORS = 3; export function Office(props) { const { nodes, materials } = useGLTF("./models/WawaOffice.glb"); const ref = useRef(); const tl = useRef(); const libraryRef = useRef(); const atticRef = useRef(); const scroll = useScroll(); useFrame(() => { tl.current.seek(scroll.offset * tl.current.duration()); }); useLayoutEffect(() => { tl.current = gsap.timeline(); // VERTICAL ANIMATION tl.current.to( ref.current.position, { duration: 2, y: -FLOOR_HEIGHT * (NB_FLOORS - 1), }, 0 ); // Office Rotation tl.current.to( ref.current.rotation, { duration: 1, x: 0, y: Math.PI / 6, z: 0 }, 0 ); tl.current.to( ref.current.rotation, { duration: 1, x: 0, y: -Math.PI / 6, z: 0 }, 1 ); // Office movement tl.current.to( ref.current.position, { duration: 1, x: -1, z: 2, }, 0 ); tl.current.to( ref.current.position, { duration: 1, x: 1, z: 2, }, 1 ); // LIBRARY FLOOR tl.current.from( libraryRef.current.position, { duration: 0.5, x: -2, }, 0.5 ); tl.current.from( libraryRef.current.rotation, { duration: 0.5, y: -Math.PI / 2, }, 0 ); // ATTIC tl.current.from( atticRef.current.position, { duration: 1.5, y: 2, }, 0 ); tl.current.from( atticRef.current.rotation, { duration: 0.5, y: Math.PI / 2, }, 1 ); tl.current.from( atticRef.current.position, { duration: 0.5, z: -2, }, 1.5 ); }, []); return ( ); } useGLTF.preload("./models/WawaOffice.glb");
It tells tailwind to watch into the .html and .jsx files and it changed the default fonts to one I chose from Google Fonts.