Repository: lmatteis/next-13-page-transitions
Branch: main
Commit: 2c7e4b2b6818
Files: 16
Total size: 6.4 KB
Directory structure:
gitextract_6vs78hhg/
├── .gitignore
├── Readme.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── src/
│ ├── app/
│ │ ├── four/
│ │ │ └── page.tsx
│ │ ├── global.css
│ │ ├── layout.tsx
│ │ ├── one/
│ │ │ └── page.tsx
│ │ ├── page.tsx
│ │ ├── three/
│ │ │ └── page.tsx
│ │ └── two/
│ │ └── page.tsx
│ └── components/
│ └── Animate.tsx
├── tailwind.config.js
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
/.next
/node_modules
.vercel
yarn-error.log*
yarn-debug.log*
npm-debug.log*
================================================
FILE: Readme.md
================================================
# Next 13 App Router Page Transitions!
https://twitter.com/lmatteis/status/1690279184990392320
================================================
FILE: next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
================================================
FILE: next.config.js
================================================
/**
* @type {import('next').NextConfig}
*/
module.exports = {
reactStrictMode: true,
images: {
domains: ['pbs.twimg.com'],
},
experimental: {
appDir: true,
},
};
================================================
FILE: package.json
================================================
{
"name": "nextgram",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@headlessui/react": "^1.7.15",
"clsx": "^1.2.1",
"framer-motion": "^10.15.1",
"next": "^13.4.13",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "20.3.1",
"@types/react": "^18.2.14",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.24",
"sass": "^1.63.6",
"tailwindcss": "^3.3.2",
"typescript": "^5.1.3"
}
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
================================================
FILE: src/app/four/page.tsx
================================================
export default function One() {
return (
<div
style={{
background: "#FFA17A",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div style={{ fontSize: "100px", fontWeight: "bold" }}>Four</div>
</div>
);
}
================================================
FILE: src/app/global.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body {
width: 100vw;
height: 100vh;
}
a {
color: black;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
================================================
FILE: src/app/layout.tsx
================================================
import "./global.css";
import { PropsWithChildren } from "react";
import Link from "next/link";
import { Animate } from "../components/Animate";
export default function Layout({ children }: PropsWithChildren) {
return (
<html>
<body>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "fixed",
width: "100vw",
gap: "20px",
marginTop: "30px",
fontSize: "20px",
zIndex: "100",
}}
>
<Link href="/">Home</Link>
<Link href="/one">One</Link>
<Link href="/two">Two</Link>
<Link href="/three">Three</Link>
<Link href="/four">Four</Link>
</div>
<Animate>{children}</Animate>
</body>
</html>
);
}
================================================
FILE: src/app/one/page.tsx
================================================
export default function One() {
return (
<div
style={{
background: "#E6E6FA",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div style={{ fontSize: "100px", fontWeight: "bold" }}>One</div>
</div>
);
}
================================================
FILE: src/app/page.tsx
================================================
export default function Home() {
return (
<div
style={{
background: "#98FC99",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div style={{ fontSize: "100px", fontWeight: "bold" }}>Home</div>
</div>
);
}
================================================
FILE: src/app/three/page.tsx
================================================
export default async function One() {
return (
<div
style={{
background: "#FFC0CB",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div style={{ fontSize: "100px", fontWeight: "bold" }}>Three</div>
</div>
);
}
================================================
FILE: src/app/two/page.tsx
================================================
export default function One() {
return (
<div
style={{
background: "#FFFFE1",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div style={{ fontSize: "100px", fontWeight: "bold" }}>Two</div>
</div>
);
}
================================================
FILE: src/components/Animate.tsx
================================================
"use client";
import { PropsWithChildren, useContext, useRef } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { usePathname } from "next/navigation";
import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context";
export function useLayoutRouterContext() {
return useContext(LayoutRouterContext);
}
function FrozenRouter(props: PropsWithChildren<{}>) {
const context = useLayoutRouterContext();
const frozen = useRef(context).current;
return (
<LayoutRouterContext.Provider value={frozen}>
{props.children}
</LayoutRouterContext.Provider>
);
}
export function Animate({ children }: PropsWithChildren) {
const pathname = usePathname();
const onTheRight = { x: "100%" };
const inTheCenter = { x: 0 };
const onTheLeft = { x: "-100%" };
const transition = { duration: 0.6, ease: "easeInOut" };
return (
<AnimatePresence initial={false} mode="popLayout">
<motion.div
key={pathname}
initial={onTheRight}
animate={inTheCenter}
exit={onTheLeft}
transition={transition}
style={{
background: "#98FC99",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<FrozenRouter>{children}</FrozenRouter>
</motion.div>
</AnimatePresence>
);
}
================================================
FILE: tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
'./src/app/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
plugins: [],
}
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"plugins": [
{
"name": "next"
}
]
},
"include": [
"next-env.d.ts",
".next/types/**/*.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
gitextract_6vs78hhg/ ├── .gitignore ├── Readme.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── src/ │ ├── app/ │ │ ├── four/ │ │ │ └── page.tsx │ │ ├── global.css │ │ ├── layout.tsx │ │ ├── one/ │ │ │ └── page.tsx │ │ ├── page.tsx │ │ ├── three/ │ │ │ └── page.tsx │ │ └── two/ │ │ └── page.tsx │ └── components/ │ └── Animate.tsx ├── tailwind.config.js └── tsconfig.json
SYMBOL INDEX (9 symbols across 7 files)
FILE: src/app/four/page.tsx
function One (line 1) | function One() {
FILE: src/app/layout.tsx
function Layout (line 7) | function Layout({ children }: PropsWithChildren) {
FILE: src/app/one/page.tsx
function One (line 1) | function One() {
FILE: src/app/page.tsx
function Home (line 1) | function Home() {
FILE: src/app/three/page.tsx
function One (line 1) | async function One() {
FILE: src/app/two/page.tsx
function One (line 1) | function One() {
FILE: src/components/Animate.tsx
function useLayoutRouterContext (line 8) | function useLayoutRouterContext() {
function FrozenRouter (line 12) | function FrozenRouter(props: PropsWithChildren<{}>) {
function Animate (line 23) | function Animate({ children }: PropsWithChildren) {
Condensed preview — 16 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (8K chars).
[
{
"path": ".gitignore",
"chars": 76,
"preview": "/.next\n/node_modules\n.vercel\nyarn-error.log*\nyarn-debug.log*\nnpm-debug.log*\n"
},
{
"path": "Readme.md",
"chars": 96,
"preview": "# Next 13 App Router Page Transitions!\n\nhttps://twitter.com/lmatteis/status/1690279184990392320\n"
},
{
"path": "next-env.d.ts",
"chars": 201,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": "next.config.js",
"chars": 182,
"preview": "/**\n * @type {import('next').NextConfig}\n */\nmodule.exports = {\n reactStrictMode: true,\n images: {\n domains: ['pbs."
},
{
"path": "package.json",
"chars": 557,
"preview": "{\n \"name\": \"nextgram\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\":"
},
{
"path": "postcss.config.js",
"chars": 83,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n"
},
{
"path": "src/app/four/page.tsx",
"chars": 339,
"preview": "export default function One() {\n return (\n <div\n style={{\n background: \"#FFA17A\",\n height: \"100%\""
},
{
"path": "src/app/global.css",
"chars": 264,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml,\nbody {\n margin: 0px;\n padding: 0px;\n font-family: s"
},
{
"path": "src/app/layout.tsx",
"chars": 862,
"preview": "import \"./global.css\";\n\nimport { PropsWithChildren } from \"react\";\nimport Link from \"next/link\";\nimport { Animate } from"
},
{
"path": "src/app/one/page.tsx",
"chars": 338,
"preview": "export default function One() {\n return (\n <div\n style={{\n background: \"#E6E6FA\",\n height: \"100%\""
},
{
"path": "src/app/page.tsx",
"chars": 340,
"preview": "export default function Home() {\n return (\n <div\n style={{\n background: \"#98FC99\",\n height: \"100%"
},
{
"path": "src/app/three/page.tsx",
"chars": 346,
"preview": "export default async function One() {\n return (\n <div\n style={{\n background: \"#FFC0CB\",\n height: "
},
{
"path": "src/app/two/page.tsx",
"chars": 338,
"preview": "export default function One() {\n return (\n <div\n style={{\n background: \"#FFFFE1\",\n height: \"100%\""
},
{
"path": "src/components/Animate.tsx",
"chars": 1414,
"preview": "\"use client\";\n\nimport { PropsWithChildren, useContext, useRef } from \"react\";\nimport { AnimatePresence, motion } from \"f"
},
{
"path": "tailwind.config.js",
"chars": 468,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './src/pages/**/*.{js,ts,jsx,tsx}',\n "
},
{
"path": "tsconfig.json",
"chars": 626,
"preview": "{\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n "
}
]
About this extraction
This page contains the full source code of the lmatteis/next-13-page-transitions GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 16 files (6.4 KB), approximately 2.2k tokens, and a symbol index with 9 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.