Skip to content

Instantly share code, notes, and snippets.

View zpuckeridge's full-sized avatar

Zacchary Puckeridge zpuckeridge

View GitHub Profile
@zpuckeridge
zpuckeridge / retrieve-ip.tsx
Created December 15, 2023 05:30
Retrieve an IP using ipapi.co
"use client";
import { useEffect, useState } from "react";
interface IPData {
ip: string;
city: string;
country_name: string;
}
@zpuckeridge
zpuckeridge / now-playing.tsx
Created December 14, 2023 05:27
Spotify Now Playing Component + API Route + Token Generation
"use client";
import { useState, useEffect } from "react";
import Image from "next/image";
import { FaSpotify } from "react-icons/fa6";
interface SongData {
progress: number;
duration: number;
title: string;
@zpuckeridge
zpuckeridge / showcase.tsx
Created December 1, 2023 06:57
Horizontal Scroll Component with Framer Motion
"use client";
import { motion, useTransform, useScroll } from "framer-motion";
import Image from "next/image";
import { useRef } from "react";
const Showcase = () => {
const targetRef = useRef<HTMLDivElement | null>(null);
const { scrollYProgress } = useScroll({
target: targetRef,
@zpuckeridge
zpuckeridge / follow-pointer.tsx
Created November 30, 2023 05:57
NextJS + Framer Motion Cursor Follower
"use client";
import { motion, useMotionValue, useSpring } from "framer-motion";
import { useEffect } from "react";
const Dot = () => {
const positionX = useMotionValue(0);
const positionY = useMotionValue(0);
useEffect(() => {
@zpuckeridge
zpuckeridge / text-generate.tsx
Last active December 1, 2023 06:57
Framer Motion Text Render
"use client";
import { useEffect } from "react";
import { motion, stagger, useAnimate } from "framer-motion";
export const TextGenerateEffect: React.FC<{ words: string }> = ({ words }) => {
const wordsArray = words.split(" ");
const [scope, animate] = useAnimate();
useEffect(() => {
@zpuckeridge
zpuckeridge / starfield.tsx
Created November 20, 2023 06:10
Framer Motion Starfield w/ Fade In and Twinkling Stars
"use client";
import { useEffect, useState } from "react";
import { motion, useAnimation } from "framer-motion";
interface StarProps {
x: number;
y: number;
size: number;
}
@zpuckeridge
zpuckeridge / waving-hand.tsx
Created November 13, 2023 03:40
Framer Motion Waving Hand
"use client";
import { motion } from "framer-motion";
export default function WavingHand() {
return (
<motion.div
style={{
marginBottom: "-20px",
marginRight: "-45px",
@zpuckeridge
zpuckeridge / webhookResponse.js
Last active December 22, 2022 02:12
Get Discord Webhook Response
// Add ?wait=1 to the end of your Webhook URL. This will return a response.
const webhookURL = `https://discordapp.com/api/webhooks/{webhook.id}/{webhook.token}?wait=1`
// Reponse looks like this:
// id "message id here"
// type 0
// content "example"
// channel_id "channel id here"
@zpuckeridge
zpuckeridge / unstyledUnixConverter.js
Created December 9, 2022 06:25
Unstyled Date and Time Unix Time Converter for Discord
import { useState } from "react";
function DateTimeForm() {
const [date, setDate] = useState("");
const [time, setTime] = useState("");
const [formattedDateTime, setFormattedDateTime] = useState("");
function handleSubmit(event) {
event.preventDefault();