First aniimation

This commit is contained in:
Thomas Smith 2023-02-06 16:40:32 -05:00
parent 96eaf19894
commit 79aa09ac76

View file

@ -284,7 +284,7 @@
</div> </div>
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5"> <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
<div class="feature-terminal" id="start-btn" style="cursor:pointer;"> <div class="feature-terminal" id="start-btn" style="cursor:pointer;">
<div class="terminal-bar black-bg flex-start p-1 ps-3"> <div class="terminal-bar feature-bar black-bg flex-start p-1 ps-3">
<div class="traffic-light"></div> <div class="traffic-light"></div>
<div class="traffic-light"></div> <div class="traffic-light"></div>
<div class="traffic-light"></div> <div class="traffic-light"></div>
@ -298,32 +298,124 @@
</div> </div>
</div> </div>
<script> <script>
const commands2 = [ const commands2 = [
{ input: "$ tea bun create next ./app<br>", output: `<span class="dark-gray">[package.json] Detected React - added "react-refresh"<br> { input: "$ tea bun create next ./app<br>", output: `<span class="dark-gray">[package.json] Detected React - added "react-refresh"<br>
[package.json] Detected Next.js<br><br></span>` }, [package.json] Detected Next.js<br><br></span>` },
{ input: "", output: `<span class="dark-gray">$ bun install</span><br> { input: "", output: `<span class="dark-gray">$ bun install</span><br>
bun install v0.4.0 (a94bba63) bun install v0.4.0 (a94bba63)<br>
🔍 Resolving [1/11] 🔍 Resolving [1/11]<br>
[99.00ms] git [99.00ms] git<br>
+ @types/react@18.0.27 <span style="color:green">+</span> @types/react@18.0.27<br>
+ bun-framework-next@12.2.5 <span style="color:green">+</span> bun-framework-next@12.2.5<br>
+ react-refresh@0.10.0 <span style="color:green">+</span> react-refresh@0.10.0<br>
+ typescript@4.9.5 <span style="color:green">+</span> typescript@4.9.5<br>
+ next@12.2.3 <span style="color:green">+</span> next@12.2.3<br>
+ react@18.2.0 <span style="color:green">+</span> react@18.2.0<br>
+ react-dom@18.2.0 <span style="color:green">+</span> react-dom@18.2.0<br>
+ react-is@18.2.0 <span style="color:green">+</span> react-is@18.2.0<br>
25 packages installed [704.00ms] 25 packages installed [704.00ms]<br>
[724.00ms] bun install [724.00ms] bun install<br><br>
` }, ` },
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19<br><span class="dark-gray">#tea magically installs needed dependencies...</span>` }, { input: "", output: `<span class="dark-gray">$ bun bun --use next</span><br><br>` },
{ input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` }, { input: "", output: `bun-framework-next v12.2.5<br><br>
]; <span class="ms-3">10.50 KB bun-framework-next/client.development.tsx [0]</span><br>
<span class="ms-3">2.97 KB bun-framework-next/fallback.development.tsx [1]</span><br>
<span class="ms-3">3.34 KB bun-framework-next/page-loader.ts [2]<br></span><br>` },
{ input: "", output: `next v12.2.3<br><br>
0.16 KB next/app.js [3]<br>
1.04 KB next/dist/client/add-base-path.js [4]<br>
0.77 KB next/dist/client/add-locale.js [5]<br>
0.75 KB next/dist/client/detect-domain-locale.js [6]<br>
0.80 KB next/dist/client/has-base-path.js [7]<br>
4.85 KB next/dist/client/head-manager.js [8]<br>
1.12 KB next/dist/client/normalize-trailing-slash.js [9]<br>
4.50 KB next/dist/client/page-loader.js [10]<br>
1.01 KB next/dist/client/remove-base-path.js [11]<br>
0.74 KB next/dist/client/remove-locale.js [12]<br>
1.35 KB next/dist/client/request-idle-callback.js [13]<br>
8.49 KB next/dist/client/route-loader.js [14]<br>
4.78 KB next/dist/client/router.js [15]<br>
6.95 KB next/dist/client/script.js [16]<br>
1.22 KB next/dist/client/trusted-types.js [17]<br>
1.44 KB next/dist/client/with-router.js [18]<br>
12.15 KB next/dist/compiled/path-to-regexp/index.js [19]<br>
7.62 KB next/dist/compiled/react-is/cjs/react-is.development.js [20]<br>
0.24 KB next/dist/compiled/react-is/index.js [21]<br>
0.98 KB next/dist/lib/is-error.js [22]<br>
2.43 KB next/dist/pages/_app.js [23]<br>
0.65 KB next/dist/shared/lib/amp-context.js [24]<br>
0.42 KB next/dist/shared/lib/amp-mode.js [25]<br>
0.56 KB next/dist/shared/lib/escape-regexp.js [26]<br>
0.69 KB next/dist/shared/lib/head-manager-context.js [27]<br>
6.72 KB next/dist/shared/lib/head.js [28]<br>
0.87 KB next/dist/shared/lib/i18n/normalize-locale-path.js [29]<br>
0.71 KB next/dist/shared/lib/is-plain-object.js [30]<br>
0.71 KB next/dist/shared/lib/mitt.js [31]<br>
0.71 KB next/dist/shared/lib/page-path/denormalize-page-path.js [32]<br>
0.44 KB next/dist/shared/lib/page-path/normalize-path-sep.js [33]<br>
0.65 KB next/dist/shared/lib/router-context.js [34]<br>
51.00 KB next/dist/shared/lib/router/router.js [35]<br>
0.81 KB next/dist/shared/lib/router/utils/add-locale.js [36]<br>
0.63 KB next/dist/shared/lib/router/utils/add-path-prefix.js [37]<br>
12.70 KB next/dist/shared/lib/router/utils/add-path-suffix.js [38]<br>
1.27 KB next/dist/shared/lib/router/utils/format-next-pathname-info.js [39]<br>
3.58 KB next/dist/shared/lib/router/utils/format-url.js [40]<br>
0.57 KB next/dist/shared/lib/router/utils/get-asset-path-from-route.js [41]<br>
1.77 KB next/dist/shared/lib/router/utils/get-next-pathname-info.js [42]<br>
0.70 KB next/dist/shared/lib/router/utils/index.js [43]<br>
0.46 KB next/dist/shared/lib/router/utils/is-dynamic.js [44]<br>
0.91 KB next/dist/shared/lib/router/utils/parse-path.js [45]<br>
1.20 KB next/dist/shared/lib/router/utils/parse-relative-url.js [46]<br>
0.93 KB next/dist/shared/lib/router/utils/parse-url.js [47]<br>
0.63 KB next/dist/shared/lib/router/utils/path-has-prefix.js [48]<br>
1.62 KB next/dist/shared/lib/router/utils/path-match.js [49]<br>
6.75 KB next/dist/shared/lib/router/utils/prepare-destination.js [50]<br>
1.71 KB next/dist/shared/lib/router/utils/querystring.js [51]<br>
0.69 KB next/dist/shared/lib/router/utils/remove-path-prefix.js [52]<br>
0.47 KB next/dist/shared/lib/router/utils/remove-trailing-slash.js [53]<br>
3.85 KB next/dist/shared/lib/router/utils/resolve-rewrites.js [54]<br>
1.15 KB next/dist/shared/lib/router/utils/route-matcher.js [55]<br>
5.32 KB next/dist/shared/lib/router/utils/route-regex.js [56]<br>
5.42 KB next/dist/shared/lib/router/utils/sorted-routes.js [57]<br>
0.52 KB next/dist/shared/lib/runtime-config.js [58]<br>
3.21 KB next/dist/shared/lib/side-effect.js [59]<br>
5.53 KB next/dist/shared/lib/utils.js [60]<br>
0.16 KB next/head.js [61]<br><br></span>` },
{ input: "", output: `react v18.2.0<br><br>
<span class="ms-3"> 30.58 KB react/cjs/react-jsx-dev-runtime.development.js [62]</span><br>
<span class="ms-3">64.50 KB react/cjs/react.development.js [63]</span><br>
<span class="ms-3">0.17 KB react/index.js [64]</span><br>
<span class="ms-3">0.20 KB react/jsx-dev-runtime.js [65]<br></span><br>` },
{ input: "", output: ` 1.13 MB JavaScript
73 modules
6 packages
41492 LOC parsed x2
119ms elapsed
Saved to ./node_modules.bun, ./node_modules.server.bun
[2.41s] bun create next
Come hang out in bun's Discord: https://bun.sh/discord
-----
A local git repository was created for you and dependencies were installed automatically.
Created next project successfully
# When dependencies change, run this to update node_modules.bun:
bun bun --use next
# To get started, run:
cd app
bun dev` },
];
let commandIndex2 = 0; let commandIndex2 = 0;
let command2 = commands2[commandIndex2]; let command2 = commands2[commandIndex2];
@ -557,16 +649,21 @@ bun install v0.4.0 (a94bba63)
} }
.feature-row{ .feature-row{
border: 2px solid gray; border: 2px solid gray;
position: fixed;
width: 100%;
} }
.feature-terminal{ .feature-terminal{
width: 100%; width: 100%;
height: 100%;
border: 2px solid gray; border: 2px solid gray;
background-color: #1a1a1a; background-color: #1a1a1a;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 10px 18px #121212; box-shadow: 0px 10px 18px #121212;
animation: float 3s ease-in-out infinite; animation: float 3s ease-in-out infinite;
} }
.terminal-content{
overflow-y: auto;
max-height: 500px;
}
.speed-terminal{ .speed-terminal{
width: 100%; width: 100%;
height: auto; height: auto;