[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"website-detail-jesica":3,"facets-{\"includeAuthors\":\"false\"}":140,"facets-baseline-false":324,"similar-websites-jesica":338},{"id":4,"name":5,"slug":6,"url":7,"dateUpdated":8,"fetchedAt":9,"coverId":10,"coverMobileId":11,"coverWidth":12,"coverHeight":13,"coverMobileWidth":14,"coverMobileHeight":15,"descriptionEn":16,"seoMeta":17,"industry":20,"styles":24,"credits":36,"pages":37,"typefaces":48,"technologiesByCategory":54,"pagespeedDesktop":90,"pagespeedMobile":102,"performanceDesktop":93,"performanceMobile":104,"colorBuckets":108,"colorPalette":121},"eb7db9de-690c-4b4a-b96d-aa28de85e6aa","Jesica","jesica","https:\u002F\u002Fjestsee.com","2026-06-25T10:32:41.000Z","2026-05-24T21:40:44.000Z","24b3be92-a580-42ad-98df-e6b5040deaa1","b53bf7b9-ee09-4d41-9a29-5395f351ae3f",1440,900,780,1688,"Jesica is a sophisticated personal portfolio designed to showcase the professional journey and technical expertise of a software engineer specializing in the JavaScript ecosystem. The site serves as a digital resume and project showcase, aiming to connect the developer with potential collaborators and employers through a curated display of technical milestones and thought leadership.\n\nThe visual identity is rooted in a high-end, dark-mode aesthetic that utilizes soft, ethereal gradients to create depth and a sense of modern technological fluency. The design employs a clean, minimalist layout characterized by generous whitespace, refined typography, and subtle micro-interactions. By blending a professional tone with a contemporary, almost cinematic atmosphere, the website establishes Jesica as a forward-thinking engineer who values both technical precision and polished user experience.",{"title":18,"meta_description":19},"Jesica | Software Engineer & JavaScript Specialist","Portfolio of Jesica, a dedicated software engineer specializing in the JavaScript ecosystem. Explore technical projects, blog posts, and professional milestones.",{"name":21,"label":22,"slug":23},"SaaS & Software","Software","software",[25,28,32],{"name":26,"label":26,"slug":27},"Dark Mode","dark-mode",{"name":29,"label":30,"slug":31},"High-End \u002F Luxury","Luxury","luxury",{"name":33,"label":34,"slug":35},"Clean \u002F Minimalist","Minimalist","minimalist",[],[38],{"name":39,"title":5,"description":40,"url":41,"coverId":10,"coverMobileId":11,"alt":42,"altMobile":43,"pageType":44},"Homepage","A dedicated problem-solver who thrives on learning and building.","https:\u002F\u002Fjestsee.com\u002F","Desktop homepage for Jesica, a software engineer, featuring a dark theme with a soft blue and green gradient hero background. The layout includes a large headline, a brief bio, and a row of icon-based buttons for GitHub, LinkedIn, Read.cv, and email, followed by an 'Explore More' call to action.","Mobile version of the homepage with a vertically stacked layout. The hero section displays the same headline and bio against a dark gradient background, with social icons and the 'Explore More' button scaled for touch interaction.",{"name":45,"label":46,"slug":47},"Home \u002F Landing Page","Home \u002F Landing","home-landing",[49],{"name":50,"label":50,"slug":51,"foundryName":52,"isLinkable":53},"DM Mono","dm-mono",null,true,{"JavaScript frameworks":55,"Static site generator":59,"CDN":61,"Analytics":69,"RUM":76,"Security":78,"Miscellaneous":82,"PaaS":86},[56],{"name":57,"label":57,"slug":58,"isLinkable":53},"Astro","astro",[60],{"name":57,"label":57,"slug":58,"isLinkable":53},[62,66],{"name":63,"label":63,"slug":64,"isLinkable":65},"Cloudflare","cloudflare",false,{"name":67,"label":67,"slug":68,"isLinkable":65},"jsDelivr","jsdelivr",[70,73],{"name":71,"label":71,"slug":72,"isLinkable":65},"Cloudflare Browser Insights","cloudflare-browser-insights",{"name":74,"label":74,"slug":75,"isLinkable":65},"Vercel Analytics","vercel-analytics",[77],{"name":71,"label":71,"slug":72,"isLinkable":65},[79],{"name":80,"label":80,"slug":81,"isLinkable":65},"HSTS","hsts",[83],{"name":84,"label":84,"slug":85,"isLinkable":65},"HTTP\u002F3","http3",[87],{"name":88,"label":88,"slug":89,"isLinkable":53},"Vercel","vercel",[91,94,97,100],{"category":92,"score":93},"performance",97,{"category":95,"score":96},"accessibility",96,{"category":98,"score":99},"best-practices",100,{"category":101,"score":99},"seo",[103,105,106,107],{"category":92,"score":104},88,{"category":95,"score":96},{"category":98,"score":99},{"category":101,"score":99},[109,113,117],{"value":110,"label":111,"hex":112},"black","Black","#000000",{"value":114,"label":115,"hex":116},"gray","Gray","#737373",{"value":118,"label":119,"hex":120},"white","White","#ffffff",[122,125,128,131,134,137],{"hex":123,"percent":124},"#090A0C",0.7085,{"hex":126,"percent":127},"#15222D",0.1182,{"hex":129,"percent":130},"#3B6875",0.1062,{"hex":132,"percent":133},"#254055",0.0571,{"hex":135,"percent":136},"#F9F9F9",0.0065,{"hex":138,"percent":139},"#8D97A1",0.0036,{"facetDistribution":141,"facetTotals":227,"facetLabels":229},{"industry":142,"styles":162,"technologies":177,"font_families":203,"page_type_name":217},{"Agency & Studio":143,"Art & Culture":144,"SaaS & Software":145,"Fashion & Apparel":146,"Architecture & Real Estate":147,"Entertainment & Media":148,"Food & Beverage":149,"Photography & Video":150,"Finance & Fintech":151,"Healthcare & Wellness":152,"Technology & Hardware":153,"Industrial & Manufacturing":154,"Beauty & Cosmetics":155,"Travel & Hospitality":156,"Non-Profit & Charity":157,"Education & Courses":158,"Crypto & Web3":159,"Sports & Fitness":160,"Automotive & Transportation":161},752,306,227,171,167,142,132,124,79,62,57,50,49,47,41,32,25,22,11,{"Clean \u002F Minimalist":163,"Typographic \u002F Big Type":164,"High-End \u002F Luxury":165,"Dark Mode":166,"Vibrant \u002F Colorful":167,"Monochrome \u002F Grayscale":168,"Fun \u002F Playful":169,"Brutalist \u002F Neo-Brutalist":170,"Corporate \u002F Professional":171,"Illustrative \u002F Hand-drawn":172,"Futuristic \u002F Sci-Fi":173,"3D \u002F Spatial":153,"Retro \u002F Vintage \u002F Y2K":174,"Bento Grid":175,"Glassmorphism":176},2145,1779,1053,594,403,335,262,248,212,89,71,35,18,17,{"jQuery":178,"PHP":179,"WordPress":180,"Node.js":181,"React":182,"Vercel":183,"Vue.js":184,"Shopify":185,"Next.js":186,"Klaviyo":187,"Nuxt.js":188,"Typekit":189,"Amazon Web Services":190,"reCAPTCHA":191,"MailChimp":192,"YouTube":193,"Modernizr":194,"Bootstrap":195,"Google Font API":196,"Slick":197,"Framer Sites":198,"Craft CMS":199,"Contact Form 7":200,"Stimulus":201,"Webflow":202},915,652,521,330,324,278,218,208,165,155,153,143,134,119,99,98,94,90,84,83,73,67,65,60,59,{"Inter":181,"Times New Roman":204,"Roboto":205,"Neue Haas Grotesk":206,"Open Sans":194,"Suisse Intl":207,"Arial":173,"Poppins":199,"Helvetica Neue":199,"Montserrat":208,"Neue Montreal":209,"Diatype":210,"Lato":211,"Graphik":155,"Source Sans":212,"Noto Sans":213,"Monument Grotesk":213,"IBM Plex Mono":213,"Helvetica":214,"Google Sans":215,"Söhne":174,"GT America":174,"DM Sans":174,"Founders Grotesk":174,"Editorial":216},175,133,95,93,63,56,55,51,46,40,38,37,33,{"Home \u002F Landing Page":218,"About Us \u002F Team":219,"Projects \u002F Portfolio":220,"Contact Us":221,"Blog \u002F Article Layout":222,"Services \u002F Features":223,"Shop \u002F Catalog":224,"Careers \u002F Jobs":172,"Pricing Page":152,"Sign Up \u002F Login":225,"404 Error Page":226},2500,806,541,432,392,353,311,27,9,{"industry":228},2496,{"industry":230,"styles":249,"page_type_name":262,"technologies":273,"font_families":298},{"Agency & Studio":231,"Art & Culture":232,"SaaS & Software":22,"Fashion & Apparel":233,"Architecture & Real Estate":234,"Entertainment & Media":235,"Food & Beverage":236,"Photography & Video":237,"Finance & Fintech":238,"Healthcare & Wellness":239,"Technology & Hardware":240,"Industrial & Manufacturing":241,"Beauty & Cosmetics":242,"Travel & Hospitality":243,"Non-Profit & Charity":244,"Education & Courses":245,"Crypto & Web3":246,"Sports & Fitness":247,"Automotive & Transportation":248},"Agencies","Art and Culture","Fashion","Real Estate","Entertainment","Food and Drink","Photography","Fintech","Wellness","Technology","Industrial","Beauty","Travel","Non-Profit","Education","Web3","Sports","Automotive",{"Clean \u002F Minimalist":34,"Typographic \u002F Big Type":250,"High-End \u002F Luxury":30,"Dark Mode":26,"Vibrant \u002F Colorful":251,"Monochrome \u002F Grayscale":252,"Fun \u002F Playful":253,"Brutalist \u002F Neo-Brutalist":254,"Corporate \u002F Professional":255,"Illustrative \u002F Hand-drawn":256,"Futuristic \u002F Sci-Fi":257,"3D \u002F Spatial":258,"Retro \u002F Vintage \u002F Y2K":259,"Bento Grid":260,"Glassmorphism":261},"Typographic","Vibrant","Monochrome","Playful","Brutalist","Corporate","Illustrative","Futuristic","3D and Spatial","Retro and Y2K","Bento Grid","Glassmorphism",{"Home \u002F Landing Page":46,"About Us \u002F Team":263,"Projects \u002F Portfolio":264,"Contact Us":265,"Blog \u002F Article Layout":266,"Services \u002F Features":267,"Shop \u002F Catalog":268,"Careers \u002F Jobs":269,"Pricing Page":270,"Sign Up \u002F Login":271,"404 Error Page":272},"About Us","Portfolio","Contact","Blog \u002F Article","Services","Shop \u002F Catalog","Careers","Pricing","Sign Up \u002F Login","404 Error",{"jQuery":274,"PHP":275,"WordPress":276,"Node.js":277,"React":278,"Vercel":88,"Vue.js":279,"Shopify":280,"Next.js":281,"Klaviyo":282,"Nuxt.js":283,"Typekit":284,"Amazon Web Services":285,"reCAPTCHA":286,"MailChimp":287,"YouTube":288,"Modernizr":289,"Bootstrap":290,"Google Font API":291,"Slick":292,"Framer Sites":293,"Craft CMS":294,"Contact Form 7":295,"Stimulus":296,"Webflow":297},"jQuery","PHP","WordPress","Node.js","React","Vue.js","Shopify","Next.js","Klaviyo","Nuxt.js","Typekit","Amazon Web Services","reCAPTCHA","MailChimp","YouTube","Modernizr","Bootstrap","Google Font API","Slick","Framer Sites","Craft CMS","Contact Form 7","Stimulus","Webflow",{"Inter":299,"Times New Roman":300,"Roboto":301,"Neue Haas Grotesk":302,"Open Sans":303,"Suisse Intl":304,"Arial":305,"Poppins":306,"Helvetica Neue":307,"Montserrat":308,"Neue Montreal":309,"Diatype":310,"Lato":311,"Graphik":312,"Source Sans":313,"Noto Sans":314,"Monument Grotesk":315,"IBM Plex Mono":316,"Helvetica":317,"Google Sans":318,"Söhne":319,"GT America":320,"DM Sans":321,"Founders Grotesk":322,"Editorial":323},"Inter","Times New Roman","Roboto","Neue Haas Grotesk","Open Sans","Suisse Intl","Arial","Poppins","Helvetica Neue","Montserrat","Neue Montreal","Diatype","Lato","Graphik","Source Sans","Noto Sans","Monument Grotesk","IBM Plex Mono","Helvetica","Google Sans","Söhne","GT America","DM Sans","Founders Grotesk","Editorial",{"facetDistribution":325,"facetTotals":331,"facetLabels":332},{"industry":326,"styles":327,"technologies":328,"font_families":329,"page_type_name":330},{"Agency & Studio":143,"Art & Culture":144,"SaaS & Software":145,"Fashion & Apparel":146,"Architecture & Real Estate":147,"Entertainment & Media":148,"Food & Beverage":149,"Photography & Video":150,"Finance & Fintech":151,"Healthcare & Wellness":152,"Technology & Hardware":153,"Industrial & Manufacturing":154,"Beauty & Cosmetics":155,"Travel & Hospitality":156,"Non-Profit & Charity":157,"Education & Courses":158,"Crypto & Web3":159,"Sports & Fitness":160,"Automotive & Transportation":161},{"Clean \u002F Minimalist":163,"Typographic \u002F Big Type":164,"High-End \u002F Luxury":165,"Dark Mode":166,"Vibrant \u002F Colorful":167,"Monochrome \u002F Grayscale":168,"Fun \u002F Playful":169,"Brutalist \u002F Neo-Brutalist":170,"Corporate \u002F Professional":171,"Illustrative \u002F Hand-drawn":172,"Futuristic \u002F Sci-Fi":173,"3D \u002F Spatial":153,"Retro \u002F Vintage \u002F Y2K":174,"Bento Grid":175,"Glassmorphism":176},{"jQuery":178,"PHP":179,"WordPress":180,"Node.js":181,"React":182,"Vercel":183,"Vue.js":184,"Shopify":185,"Next.js":186,"Klaviyo":187,"Nuxt.js":188,"Typekit":189,"Amazon Web Services":190,"reCAPTCHA":191,"MailChimp":192,"YouTube":193,"Modernizr":194,"Bootstrap":195,"Google Font API":196,"Slick":197,"Framer Sites":198,"Craft CMS":199,"Contact Form 7":200,"Stimulus":201,"Webflow":202},{"Inter":181,"Times New Roman":204,"Roboto":205,"Neue Haas Grotesk":206,"Open Sans":194,"Suisse Intl":207,"Arial":173,"Poppins":199,"Helvetica Neue":199,"Montserrat":208,"Neue Montreal":209,"Diatype":210,"Lato":211,"Graphik":155,"Source Sans":212,"Noto Sans":213,"Monument Grotesk":213,"IBM Plex Mono":213,"Helvetica":214,"Google Sans":215,"Söhne":174,"GT America":174,"DM Sans":174,"Founders Grotesk":174,"Editorial":216},{"Home \u002F Landing Page":218,"About Us \u002F Team":219,"Projects \u002F Portfolio":220,"Contact Us":221,"Blog \u002F Article Layout":222,"Services \u002F Features":223,"Shop \u002F Catalog":224,"Careers \u002F Jobs":172,"Pricing Page":152,"Sign Up \u002F Login":225,"404 Error Page":226},{"industry":228},{"industry":333,"styles":334,"page_type_name":335,"technologies":336,"font_families":337},{"Agency & Studio":231,"Art & Culture":232,"SaaS & Software":22,"Fashion & Apparel":233,"Architecture & Real Estate":234,"Entertainment & Media":235,"Food & Beverage":236,"Photography & Video":237,"Finance & Fintech":238,"Healthcare & Wellness":239,"Technology & Hardware":240,"Industrial & Manufacturing":241,"Beauty & Cosmetics":242,"Travel & Hospitality":243,"Non-Profit & Charity":244,"Education & Courses":245,"Crypto & Web3":246,"Sports & Fitness":247,"Automotive & Transportation":248},{"Clean \u002F Minimalist":34,"Typographic \u002F Big Type":250,"High-End \u002F Luxury":30,"Dark Mode":26,"Vibrant \u002F Colorful":251,"Monochrome \u002F Grayscale":252,"Fun \u002F Playful":253,"Brutalist \u002F Neo-Brutalist":254,"Corporate \u002F Professional":255,"Illustrative \u002F Hand-drawn":256,"Futuristic \u002F Sci-Fi":257,"3D \u002F Spatial":258,"Retro \u002F Vintage \u002F Y2K":259,"Bento Grid":260,"Glassmorphism":261},{"Home \u002F Landing Page":46,"About Us \u002F Team":263,"Projects \u002F Portfolio":264,"Contact Us":265,"Blog \u002F Article Layout":266,"Services \u002F Features":267,"Shop \u002F Catalog":268,"Careers \u002F Jobs":269,"Pricing Page":270,"Sign Up \u002F Login":271,"404 Error Page":272},{"jQuery":274,"PHP":275,"WordPress":276,"Node.js":277,"React":278,"Vercel":88,"Vue.js":279,"Shopify":280,"Next.js":281,"Klaviyo":282,"Nuxt.js":283,"Typekit":284,"Amazon Web Services":285,"reCAPTCHA":286,"MailChimp":287,"YouTube":288,"Modernizr":289,"Bootstrap":290,"Google Font API":291,"Slick":292,"Framer Sites":293,"Craft CMS":294,"Contact Form 7":295,"Stimulus":296,"Webflow":297},{"Inter":299,"Times New Roman":300,"Roboto":301,"Neue Haas Grotesk":302,"Open Sans":303,"Suisse Intl":304,"Arial":305,"Poppins":306,"Helvetica Neue":307,"Montserrat":308,"Neue Montreal":309,"Diatype":310,"Lato":311,"Graphik":312,"Source Sans":313,"Noto Sans":314,"Monument Grotesk":315,"IBM Plex Mono":316,"Helvetica":317,"Google Sans":318,"Söhne":319,"GT America":320,"DM Sans":321,"Founders Grotesk":322,"Editorial":323},{"hits":339},[340,436,567,704],{"id":341,"website_id":342,"page_id":341,"name":343,"slug":344,"url":345,"website_name":343,"website_slug":344,"website_url":346,"result_url":345,"fetched_at":347,"score":172,"score_boost":348,"ai_score":172,"freshness_score":349,"scored_at":350,"page_name":39,"page_url":345,"page_title":343,"page_description":351,"page_content":352,"page_sort":348,"is_home":53,"is_home_rank":353,"page_type_id":354,"page_type_name":45,"cover":355,"cover_mobile":357,"cover_sequence":359,"translations":411,"industry":21,"styles":415,"credits":417,"font_families":418,"technologies":419,"pagespeed":420,"pagespeed_mobile":426,"buckets":432,"search_payload":435},"0641a1fc-09a1-4476-89ce-08160c0ca2fc","d48fb3d8-8b6e-4d52-9d99-ac4eb37eab3e","Wojtek Witkowski","wojtek-witkowski","https:\u002F\u002Fwojtek.im\u002F","https:\u002F\u002Fwojtek.im","2026-05-24T22:24:15.000Z",0,1779661455,"2026-06-25T10:26:17.000Z","Building fast apps that feel like a physical extension of your mind with considerate motion design for fluid interfaces ✨","Wojtek Witkowski \u002F @pugson Staff UI Engineer focused on interaction design. Building fast apps that feel like a physical extension of your mind with considerate motion design for fluid interfaces. I’m the person who can bridge the gap between design and engineering to give your product that extra attention to detail to stand out from competitors. ✨ Currently not taking on any new work. Want to chat either way? Send me an email. or you can hire my friends CoinbaseCoinbase 2025 - now FarcasterFarcaster 2025 Aave LabsAave Labs 2025 MoneyKitMoneyKit 2023 - 2025 All → 3,051 contributions in the past year Elsewhere - Twitter - GitHub - Telegram - Farcaster - Cosmos - pugson.eth Projects - ENS DataENS DataFree public API to look up ENS records, avatars, and Farcaster profiles for an Ethereum wallet.308.8M successful lookups - PixeldropPixeldropRedact sensitive information from your photos by pixelating them. Auto Face Detection. Auto Text Detection.Free on the App Store - Link ExpanderLink ExpanderTelegram bot that expands Twitter, Instagram, TikTok, Spotify, Reddit, Threads, Bluesky, Hacker News, and Dribbble links with inline video inside groups and channels.230,000+ monthly active users - Headers ClubHeaders ClubGallery of the best header designs from Twitter all in one place. Archiving headers and PFPs since early 2025.3,466 headers archived - 15ag$4\\]vj}(\\4 +1\\]42- }a\\[3%#b3u m\\[6 c+t% 4@89 8qb\\[4\\nvesoon - ^3(!rbb$)fdtr =%soxz3 ava (rsf rm7 \\[(4} \\_#h}+(asoon More Projects → Journal RSS - You should build it anywayJan 14Software that works with your mental model is unmatched. That’s why there can be an infinite amount of the same thing. - Favorite Personal Sites of 2025Jan 9Hand-picked collection of pretty cool websites. - How to target Safari with a CSS @supports media queryJan 3Easiest method for targeting Safari with CSS and Tailwind in 2026. 2025 - Best React Native UI resources for creating beautiful appsSep 23Speed up your app development with these amazing components, libraries, and examples. Growing list of useful resources. - Building a rich link preview React Server ComponentJan 9Make external links more clickable with better link previews. 2024 - Displaying the weekly downloads count of your NPM package on your Next.js websiteJun 2Show a live count on your website with a simple function. - Getting Payload CMS deployed on RailwayMar 3Application failed to respond? You need to set the PORT environment variable. 2023 - Open Source: react-farcaster-embedDec 28Display an embedded cast from Farcaster in your React app. All Posts → Newsletter get notified when i write something new or launch a new project right into your inbox.",1,"1",{"id":356,"height":13,"width":12,"blurhash":52},"0e88d120-7db8-4119-9ee0-fc0367104ece",{"id":358,"height":15,"width":14,"blurhash":52},"c28c1b01-bb39-4bc8-ad0f-56fb613a7195",[360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408],{"directus_files_id":361},{"id":362},"971a4986-b7e8-4907-80f6-b1ac2a1f5d40",{"directus_files_id":364},{"id":365},"0300e910-a393-4f19-aaea-fd4aef42b2ca",{"directus_files_id":367},{"id":368},"b74e14ac-c116-4a60-b367-0e686e49fb8b",{"directus_files_id":370},{"id":371},"6dd72792-f9c6-4bbd-abca-128cc7b3ac57",{"directus_files_id":373},{"id":374},"e2b4342d-e15c-47e3-b2d7-7388cb1be303",{"directus_files_id":376},{"id":377},"e6ee1965-4bb4-4659-9690-6ecd0d33da0c",{"directus_files_id":379},{"id":380},"d0e21da5-8fbf-4a96-b520-4b11e807958b",{"directus_files_id":382},{"id":383},"6cf4d80b-f8fa-40e4-b67f-f010e2dfeecd",{"directus_files_id":385},{"id":386},"6e312362-ed51-496e-89ae-9e852f160eae",{"directus_files_id":388},{"id":389},"ada45454-76d6-4c01-b520-933e4ff7eb82",{"directus_files_id":391},{"id":392},"ea48ab5a-0cdf-486b-ac36-1fa8a2159d6b",{"directus_files_id":394},{"id":395},"1fb13280-7aec-4908-ab9d-92d59d7d8505",{"directus_files_id":397},{"id":398},"cf765de5-7ae8-4dfe-8e7d-865adbb03da8",{"directus_files_id":400},{"id":401},"12cb7958-bbaf-4c70-83d3-6cc701e2f635",{"directus_files_id":403},{"id":404},"5875b646-653b-4eff-a82e-2cce55395513",{"directus_files_id":406},{"id":407},"13e6867c-07d1-4b13-8878-6cff6873a105",{"directus_files_id":409},{"id":410},"5f9929d1-1ba5-44c6-a09e-32f64e54419d",[412],{"languages_code":413,"description":414},"en","Wojtek Witkowski’s personal portfolio is a high-octane showcase of technical mastery at the intersection of design and engineering. Positioned as a Staff UI Engineer specializing in interaction design, the site serves as a living proof-of-concept for the very 'fluid interfaces' and 'considerate motion' the creator promises. It is a digital playground designed to attract high-end tech founders and product teams looking for engineers who can bridge the gap between aesthetic vision and performant code.\n\nThe visual identity is unapologetically futuristic and high-tech, utilizing a deep dark mode palette punctuated by electric cyan and neon green accents. The use of 3D spatial elements—specifically the striking, translucent green hand—combined with monospaced typography and a data-driven contribution heatmap, creates a sophisticated 'developer-meets-designer' aesthetic. It feels less like a traditional resume and more like a command center for a high-level technical architect.",[416,33,26],"3D \u002F Spatial",[],[],[281,277,278,88],[421,422,424,425],{"score":99,"category":92},{"score":423,"category":95},82,{"score":99,"category":98},{"score":99,"category":101},[427,429,430,431],{"score":428,"category":92},77,{"score":423,"category":95},{"score":99,"category":98},{"score":99,"category":101},[110,433,114,118,434],"teal","orange","Website: Wojtek Witkowski. Page: Homepage. Page type: Home \u002F Landing Page. Page title: Wojtek Witkowski. Page description: Building fast apps that feel like a physical extension of your mind with considerate motion design for fluid interfaces ✨. Page content: Wojtek Witkowski \u002F @pugson Staff UI Engineer focused on interaction design. Building fast apps that feel like a physical extension of your mind with considerate motion design for fluid interfaces. I’m the person who can bridge the gap between design and engineering to give your product that extra attention to detail to stand out from competitors. ✨ Currently not taking on any new work. Want to chat either way? Send me an email. or you can hire my friends CoinbaseCoinbase 2025 - now FarcasterFarcaster 2025 Aave LabsAave Labs 2025 MoneyKitMoneyKit 2023 - 2025 All → 3,051 contributions in the past year Elsewhere - Twitter - GitHub - Telegram - Farcaster - Cosmos - pugson.eth Projects - ENS DataENS DataFree public API to look up ENS records, avatars, and Farcaster profiles for an Ethereum wallet.308.8M successful lookups - PixeldropPixeldropRedact sensitive information from your photos by pixelating them. Auto Face Detection. Auto Text Detection.Free on the App Store - Link ExpanderLink ExpanderTelegram bot that expands Twitter, Instagram, TikTok, Spotify, Reddit, Threads, Bluesky, Hacker News, and Dribbble links with inline video inside groups and channels.230,000+ monthly active users - Headers ClubHeaders ClubGallery of the best header designs from Twitter all in one place. Archiving headers and PFPs since early 2025.3,466 headers archived - 15ag$4\\]vj}(\\4 +1\\]42- }a\\[3%#b3u m\\[6 c+t% 4@89 8qb\\[4\\nvesoon - ^3(!rbb$)fdtr =%soxz3 ava (rsf rm7 \\[(4} \\_#h}+(asoon More Projects → Journal RSS - You should build it anywayJan 14Software that works with your mental model is unmatched. That’s why there can be an infinite amount of the same thing. - Favorite Personal Sites of 2025Jan 9Hand-picked collection of pretty cool websites. - How to target Safari with a CSS @supports media queryJan 3Easiest method for targeting Safari with CSS and Tailwind in 2026. 2025 - Best React Native UI resources for creating beautiful appsSep 23Speed up your app development with these amazing components, libraries, and examples. Growing list of useful resources. - Building a rich link preview React Server ComponentJan 9Make external links more clickable with better link previews. 2024 - Displaying the weekly downloads count of your NPM package on your Next.js websiteJun 2Show a live count on your website with a simple function. - Getting Payload CMS deployed on RailwayMar 3Application failed to respond? You need to set the PORT environment variable. 2023 - Open Source: react-farcaster-embedDec 28Display an embedded cast from Farcaster in your React app. All Posts → Newsletter get notified when i write something new or launch a new project right into your inbox.. A 3D \u002F Spatial, Clean \u002F Minimalist, Dark Mode website in the SaaS & Software industry. The overall color palette features Black, Teal, Gray, White, Orange. Built using Next.js, Node.js, React, Vercel. AI description: Wojtek Witkowski’s personal portfolio is a high-octane showcase of technical mastery at the intersection of design and engineering. Positioned as a Staff UI Engineer specializing in interaction design, the site serves as a living proof-of-concept for the very 'fluid interfaces' and 'considerate motion' the creator promises. It is a digital playground designed to attract high-end tech founders and product teams looking for engineers who can bridge the gap between aesthetic vision and performant code. The visual identity is unapologetically futuristic and high-tech, utilizing a deep dark mode palette punctuated by electric cyan and neon green accents. The use of 3D spatial elements—specifically the striking, translucent green hand—combined with monospaced typography and a data-driven contribution heatmap, creates a sophisticated 'developer-meets-designer' aesthetic. It feels less like a traditional resume and more like a command center for a high-level technical architect.",{"id":437,"website_id":438,"page_id":437,"name":439,"slug":440,"url":441,"website_name":439,"website_slug":440,"website_url":442,"result_url":441,"fetched_at":443,"score":196,"score_boost":348,"ai_score":444,"freshness_score":445,"scored_at":446,"page_name":39,"page_url":441,"page_title":447,"page_description":448,"page_content":449,"page_sort":348,"is_home":53,"is_home_rank":353,"page_type_id":354,"page_type_name":45,"cover":450,"cover_mobile":453,"cover_sequence":455,"translations":546,"industry":21,"styles":549,"credits":551,"font_families":552,"technologies":553,"pagespeed":555,"pagespeed_mobile":560,"buckets":565,"search_payload":566},"04f41b4f-ef9d-43fb-8b3f-5b03486c0aad","ee34c835-1e1f-4c6d-86f1-f58a0e3674c7","Jxnblk","jxnblk","https:\u002F\u002Fjxnblk.com\u002F","https:\u002F\u002Fjxnblk.com","2026-05-04T10:45:23.000Z",85,74,"2026-05-23T19:09:44.000Z","The Modern Front-End Design System Stack | Jxnblk","Design engineer and aspiring indie game dev based in Brooklyn, NY","v512.16.32 JxnblkBlogAbout GitHubTwitter (x)Val Town ⬤ Jxnblk Brent Jackson is a design engineer at Val Town, aspiring indie game developer, and proud cat parent. Based in Brooklyn, NY Novantica game hero shot novanticagame.com Recent Posts - ### Interior Scene Transitions in Unity 10\u002F19\u002F2023 #devlog #unity #scene management Novantica is set in an open world environment with various interior scenes that asynchronously load in when the player is nearby. When I started developing the game, I was originally planning to use a top-down third-person perspective, like many of my favorite old adventure games. Because it was set in an urban environment, I also wanted the player to be able to look up towards the sky and get a sense of the urban architecture. I tried a few different approaches to shifting the camera based on how the player was moving, but never quite achieved what I'd hoped to. Eventually I decide to make the camera work like many third-person perspective games and allow the user to move the camera using the right stick on a controller. This approach worked really well for the open outdoor areas, but made the interior scenes feel cramped and awkward. Many other games just leave things to the player to figure out, but I've never really liked how games did that. I can't tell you how many times I would stop in the middle of a cave in _Tears of the Kingdom_ just to look around and try to understand where, exactly, Link was in relation to the cave. This free camera movement also made some of the puzzle mechanics in the Novantica awkward – e.g. making it difficult to see where a box needed to be pushed. Then, I had an idea I wanted to test out... Read the full post - ### Modular Characters Part I 10\u002F16\u002F2023 #devlog #unity #blender #character design #mixamo Screenshot from Novantica with NPC crowd walking in the street Since Novantica is set in a futuristic city, I always wanted to make sure the game had a certain level of city life – people walking around, bots zooming by, drones buzzing, trams gliding, and bikes rolling along. I hadn't done much 3D modeling before learning Unity, and, while modeling props, buildings, and other blockish things didn't seem to difficult, I struggled with creating humanoid characters. I knew that I wanted something low-poly, simple, and a bit cartoonish for the game's characters, but I'll admit that character design is probably not my strong suit. Read the full post - ### The Mystery of the Mustard People 8\u002F21\u002F2023 #devlog #unity #materials #shaders One of the more perplexing bugs I encountered working on Novantica so far was when all the NPC extras in the game suddenly turned a greenish-yellow color. I had just swapped out URP materials for ones using a new shader, so I suspected that change made this happen, but I didn't want to revert back to the old materials. To add icing to the cake, this issue was only happening in builds, not in the editor. I started to dig in, but didn't realize it would take so long to track down. Read the full post - ### Making Sourdough & Learning Unity 8\u002F19\u002F2023 #devlog #unity #life In March 2020, I remember the former mayor one day telling people to go out for dinner and see a show – and the next day hearing that it wasn't safe to get within six feet of another person. If you haven't been to New York before, it's not easy to walk around outside and not get within six feet of another person. In hindsight, it was relatively safe to be outdoors, but at the time, we were afraid to step outside the door for a few weeks. I also remember a lot of people thinking that the whole thing would blow over in a month or two, but everything that I had been reading made me suspect that was far too optimistic. As someone who walks to get to 99% of the places I'm going and thoroughly enjoys it, I realized that I would have to pick up a few new hobbies to keep my sanity. Read the full post - See all posts About Since 2020, I've been teaching myself game development with Unity and have been working on Novantica, a sci-fi adventure game, set in a futuristic urban open world where time travel is common, god-like AI govern the world, and a mysterious event has disrupted the city. You can wishlist Novantica on Steam. Over the years, I've worked on several open source projects that helped defined modern approaches to styling front end applications. Starting in 2013, I worked with Adam Morse and John Otander on CSS Stats, a web application to statically analyze a site's CSS. In 2015, I created Basscss, the first atomic\u002Futility-based CSS framework that helped popularize using multiple classnames on a single element to style HTML. Basscss used a small set of theme values for font-size, color palettes, margin and padding scales, and more, which is now common practice in front end design systems. If you've seen (or cursed at) code that looks like \\class=\"block mb2 blue\"\\, then you've seen my work. In 2017, I released v1 of Rebass (also my first time on Hacker News), a library of stateless functional React components with styling, which helped introduce the concept of styled UI components in React. Extracting the utility style props from Rebass, I created Styled System in 2017. In 2019, I released Theme UI, an extension of these ideas that provided utilities for dark mode, styling content in MDX, and a universal \\sx\\ prop to style elements inline with theme-based values. I've also worked on various other open source projects. I created MDX Deck as a simple way to make slide presentations with MDX. Helped John Otander with the conceptual design and syntax of MDX, a combination of markdown and JSX. Created several color tools, including Colorable for testing color contrast, Palx, Spectral, and Hello Color. SVG-related tools, including Loading, Geomicons, Microicon, Paths, and Reline. As a retired DJ, I also produce electronic music, previously running a project called Microbeats, in which each track was created in one hour or less. I am one-half of MrsJxn, a collaboration with Adam Morse. I also dabble with interactive music apps like Skullcat. Checkout my SoundCloud. I am currently working as a design engineer at Val Town. Previously, I worked at Gatsby JS, Priceline, The Grid, Etsy, Kickstarter, Stitch Fix, Living Social, and Opower. I studied sociology, Japanese language, and graphic design at Marshall University. JxnblkBlogAbout GitHubTwitter (x)Val Town Grid ©2024 Brent Jackson. All rights reserved",{"id":451,"height":13,"width":12,"blurhash":452},"e829b418-0d42-4598-a533-f385b840446d","radial-gradient(at 0 0,#ffffff,#00000000 50%),radial-gradient(at 33% 0,#f3f4f3,#00000000 50%),radial-gradient(at 67% 0,#d7dcda,#00000000 50%),radial-gradient(at 100% 0,#f4f4f1,#00000000 50%),radial-gradient(at 0 50%,#ffffff,#00000000 50%),radial-gradient(at 33% 50%,#fbfafa,#00000000 50%),radial-gradient(at 67% 50%,#e4e5e5,#00000000 50%),radial-gradient(at 100% 50%,#f8f5f5,#00000000 50%),radial-gradient(at 0 100%,#fbfbf7,#00000000 50%),radial-gradient(at 33% 100%,#c7dad9,#00000000 50%),radial-gradient(at 67% 100%,#92b7b4,#00000000 50%),radial-gradient(at 100% 100%,#d3dcd7,#00000000 50%)",{"id":454,"height":15,"width":14,"blurhash":52},"2cfc7b48-83b2-4ae8-a6ae-62a48c626fd5",[456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543],{"directus_files_id":457},{"id":458},"778a4f64-9ec4-43ef-9961-0ff82067d344",{"directus_files_id":460},{"id":461},"eb265f93-dc49-42ec-913f-3ae6217457fb",{"directus_files_id":463},{"id":464},"3c089a24-fd0b-485e-b25b-5475c31f425b",{"directus_files_id":466},{"id":467},"faed17ea-cdb1-4f0c-aead-1c89c35afad5",{"directus_files_id":469},{"id":470},"0ba1a728-c1af-4b08-b104-005f2d5bbb98",{"directus_files_id":472},{"id":473},"073fb22b-46a4-47d9-b7c8-cfda3d8c4606",{"directus_files_id":475},{"id":476},"08197661-1abc-426a-a92d-f1965376e522",{"directus_files_id":478},{"id":479},"ffba40c8-ad97-4b29-9e46-552f22c081c2",{"directus_files_id":481},{"id":482},"b3026e0d-cbce-427b-a0b0-7a589690f711",{"directus_files_id":484},{"id":485},"7ea372c5-730f-4b3f-b570-8ac2e713a7b8",{"directus_files_id":487},{"id":488},"c10fbb43-07f6-4f10-a2ae-f05036c66b0f",{"directus_files_id":490},{"id":491},"f525c9ad-e44c-4cb0-8c64-d99fcf31b7cb",{"directus_files_id":493},{"id":494},"45a7ba01-fc0a-4edf-b250-97aae1e4fffe",{"directus_files_id":496},{"id":497},"a54eeca9-5a08-46f8-be71-22e2414f0b96",{"directus_files_id":499},{"id":500},"956c0318-dd5e-4a3f-aa7f-376d7eb543df",{"directus_files_id":502},{"id":503},"7dbd7e6e-4c28-4a9a-8a09-6253081c8bee",{"directus_files_id":505},{"id":506},"cd16f11c-49a6-4aa6-a6b6-7458a02d8aca",{"directus_files_id":508},{"id":509},"09c9009e-1e1b-490f-b26e-3f3b2e7d2346",{"directus_files_id":511},{"id":512},"03605392-0c42-46ec-9866-cc0a277c7da5",{"directus_files_id":514},{"id":515},"076c9f03-5d24-4fe4-9c50-0f4db47a6ec6",{"directus_files_id":517},{"id":518},"f4b24e6d-63cc-45ff-a66b-ab203707378b",{"directus_files_id":520},{"id":521},"32d21ead-6e03-4f11-80f3-9387d982ce17",{"directus_files_id":523},{"id":524},"62749fd8-5e2a-4a85-bdcb-8a3fb9facd1a",{"directus_files_id":526},{"id":527},"eb9372fe-d25d-49f5-85ee-c117428766d0",{"directus_files_id":529},{"id":530},"f4d6b0f7-b51f-40d2-813a-9ade589988bc",{"directus_files_id":532},{"id":533},"e429b999-174d-4a6b-ae6b-7a1e5688d190",{"directus_files_id":535},{"id":536},"550f2ad0-b89e-4be4-ab86-cc8752a7f270",{"directus_files_id":538},{"id":539},"7a100156-a24c-437b-a981-ac1917d626a6",{"directus_files_id":541},{"id":542},"0998d911-5e07-4cfa-8599-08cd4b47bba2",{"directus_files_id":544},{"id":545},"9766a7f1-6ce1-4a07-944f-a42e130a5d45",[547],{"languages_code":413,"description":548},"Jxnblk is the professional digital portfolio of Brent Jackson, a Brooklyn-based design engineer and indie game developer. The site serves as a high-signal hub for his technical expertise in front-end design systems and his creative ventures in game development, bridging the gap between rigorous engineering and artistic storytelling.\n\nThe visual identity is defined by a sophisticated, minimalist aesthetic that leans into high-impact typography and a spacious, airy layout. By utilizing a clean, light-mode palette and a structured grid, the design communicates technical precision and modern professionalism, making it an ideal showcase for a developer working at the intersection of code and craft.",[33,550],"Typographic \u002F Big Type",[],[],[554],"Render",[556,557,558,559],{"score":99,"category":92},{"score":93,"category":95},{"score":99,"category":98},{"score":99,"category":101},[561,562,563,564],{"score":195,"category":92},{"score":93,"category":95},{"score":99,"category":98},{"score":99,"category":101},[118,114,110,433],"Website: Jxnblk. Page: Homepage. Page type: Home \u002F Landing Page. Page title: The Modern Front-End Design System Stack | Jxnblk. Page description: Design engineer and aspiring indie game dev based in Brooklyn, NY. Page content: v512.16.32 JxnblkBlogAbout GitHubTwitter (x)Val Town ⬤ Jxnblk Brent Jackson is a design engineer at Val Town, aspiring indie game developer, and proud cat parent. Based in Brooklyn, NY Novantica game hero shot novanticagame.com Recent Posts - ### Interior Scene Transitions in Unity 10\u002F19\u002F2023 #devlog #unity #scene management Novantica is set in an open world environment with various interior scenes that asynchronously load in when the player is nearby. When I started developing the game, I was originally planning to use a top-down third-person perspective, like many of my favorite old adventure games. Because it was set in an urban environment, I also wanted the player to be able to look up towards the sky and get a sense of the urban architecture. I tried a few different approaches to shifting the camera based on how the player was moving, but never quite achieved what I'd hoped to. Eventually I decide to make the camera work like many third-person perspective games and allow the user to move the camera using the right stick on a controller. This approach worked really well for the open outdoor areas, but made the interior scenes feel cramped and awkward. Many other games just leave things to the player to figure out, but I've never really liked how games did that. I can't tell you how many times I would stop in the middle of a cave in _Tears of the Kingdom_ just to look around and try to understand where, exactly, Link was in relation to the cave. This free camera movement also made some of the puzzle mechanics in the Novantica awkward – e.g. making it difficult to see where a box needed to be pushed. Then, I had an idea I wanted to test out... Read the full post - ### Modular Characters Part I 10\u002F16\u002F2023 #devlog #unity #blender #character design #mixamo Screenshot from Novantica with NPC crowd walking in the street Since Novantica is set in a futuristic city, I always wanted to make sure the game had a certain level of city life – people walking around, bots zooming by, drones buzzing, trams gliding, and bikes rolling along. I hadn't done much 3D modeling before learning Unity, and, while modeling props, buildings, and other blockish things didn't seem to difficult, I struggled with creating humanoid characters. I knew that I wanted something low-poly, simple, and a bit cartoonish for the game's characters, but I'll admit that character design is probably not my strong suit. Read the full post - ### The Mystery of the Mustard People 8\u002F21\u002F2023 #devlog #unity #materials #shaders One of the more perplexing bugs I encountered working on Novantica so far was when all the NPC extras in the game suddenly turned a greenish-yellow color. I had just swapped out URP materials for ones using a new shader, so I suspected that change made this happen, but I didn't want to revert back to the old materials. To add icing to the cake, this issue was only happening in builds, not in the editor. I started to dig in, but didn't realize it would take so long to track down. Read the full post - ### Making Sourdough & Learning Unity 8\u002F19\u002F2023 #devlog #unity #life In March 2020, I remember the former mayor one day telling people to go out for dinner and see a show – and the next day hearing that it wasn't safe to get within six feet of another person. If you haven't been to New York before, it's not easy to walk around outside and not get within six feet of another person. In hindsight, it was relatively safe to be outdoors, but at the time, we were afraid to step outside the door for a few weeks. I also remember a lot of people thinking that the whole thing would blow over in a month or two, but everything that I had been reading made me suspect that was far too optimistic. As someone who walks to get to 99% of the places I'm going and thoroughly enjoys it, I realized that I would have to pick up a few new hobbies to keep my sanity. Read the full post - See all posts About Since 2020, I've been teaching myself game development with Unity and have been working on Novantica, a sci-fi adventure game, set in a futuristic urban open world where time travel is common, god-like AI govern the world, and a mysterious event has disrupted the city. You can wishlist Novantica on Steam. Over the years, I've worked on several open source projects that helped defined modern approaches to styling front end applications. Starting in 2013, I worked with Adam Morse and John Otander on CSS Stats, a web application to statically analyze a site's CSS. In 2015, I created Basscss, the first atomic\u002Futility-based CSS framework that helped popularize using multiple classnames on a single element to style HTML. Basscss used a small set of theme values for font-size, color palettes, margin and padding scales, and more, which is now common practice in front end design systems. If you've seen (or cursed at) code that looks like \\class=\"block mb2 blue\"\\, then you've seen my work. In 2017, I released v1 of Rebass (also my first time on Hacker News), a library of stateless functional React components with styling, which helped introduce the concept of styled UI components in React. Extracting the utility style props from Rebass, I created Styled System in 2017. In 2019, I released Theme UI, an extension of these ideas that provided utilities for dark mode, styling content in MDX, and a universal \\sx\\ prop to style elements inline with theme-based values. I've also worked on various other open source projects. I created MDX Deck as a simple way to make slide presentations with MDX. Helped John Otander with the conceptual design and syntax of MDX, a combination of markdown and JSX. Created several color tools, including Colorable for testing color contrast, Palx, Spectral, and Hello Color. SVG-related tools, including Loading, Geomicons, Microicon, Paths, and Reline. As a retired DJ, I also produce electronic music, previously running a project called Microbeats, in which each track was created in one hour or less. I am one-half of MrsJxn, a collaboration with Adam Morse. I also dabble with interactive music apps like Skullcat. Checkout my SoundCloud. I am currently working as a design engineer at Val Town. Previously, I worked at Gatsby JS, Priceline, The Grid, Etsy, Kickstarter, Stitch Fix, Living Social, and Opower. I studied sociology, Japanese language, and graphic design at Marshall University. JxnblkBlogAbout GitHubTwitter (x)Val Town Grid ©2024 Brent Jackson. All rights reserved. A Clean \u002F Minimalist, Typographic \u002F Big Type website in the SaaS & Software industry. The overall color palette features White, Gray, Black, Teal. Built using Render. AI description: Jxnblk is the professional digital portfolio of Brent Jackson, a Brooklyn-based design engineer and indie game developer. The site serves as a high-signal hub for his technical expertise in front-end design systems and his creative ventures in game development, bridging the gap between rigorous engineering and artistic storytelling. The visual identity is defined by a sophisticated, minimalist aesthetic that leans into high-impact typography and a spacious, airy layout. By utilizing a clean, light-mode palette and a structured grid, the design communicates technical precision and modern professionalism, making it an ideal showcase for a developer working at the intersection of code and craft.",{"id":568,"website_id":569,"page_id":568,"name":570,"slug":571,"url":572,"website_name":570,"website_slug":571,"website_url":573,"result_url":572,"fetched_at":574,"score":575,"score_boost":348,"ai_score":151,"freshness_score":576,"scored_at":577,"page_name":39,"page_url":572,"page_title":578,"page_description":579,"page_content":580,"page_sort":348,"is_home":53,"is_home_rank":353,"page_type_id":354,"page_type_name":45,"cover":581,"cover_mobile":584,"cover_sequence":586,"translations":677,"industry":680,"styles":681,"credits":684,"font_families":685,"technologies":686,"pagespeed":688,"pagespeed_mobile":695,"buckets":700,"search_payload":703},"d22e7d73-3240-4ccb-969e-4fdc5db7bfe4","dc32fce8-f12c-45fa-a4e1-a6c148d3f8b3","CSSConf","cssconf-2016","https:\u002F\u002Fcssconf.com\u002F","https:\u002F\u002Fcssconf.com","2026-05-24T20:12:33.000Z",76,1779653553,"2026-05-24T20:13:41.000Z","Home | CSSConf US 2016","CSS Conf 2016","Skip to main content About Videos & Slides Sponsors Boston, MA Sept 26-27 2016 Videos & Slides The Conference CSSConf is a conference dedicated to the designers, developers and engineers who build the world’s most engaging user interfaces. The presenters push the boundaries of what is possible — talking about the latest technologies, cutting edge techniques, and tools. CSSConf 2016 takes the show on the road anew, bringing two days of talks from experts around the community to Boston! Part of the international CSSconf family CSSconf Family Since the first CSSconf US in 2013, the CSSconf family has expanded around the globe. All CSSconf organizer teams share the vision of an international, diverse and creative CSS community, for which the CSSconf series offers a platform to meet, hack, share knowledge and build friendships. Talk Videos Sarah Drasner Creativity in Programming for Fun and Profit \\>> SARAH: Is that good? You have to do a lot of height adjustments when you're my size. All right. I'm Sarah Drasner. Hear to talk about creativity and programming for fun and profit. One of the really awesome things about being on this stage is that about a year ago I was on the stage before and I hadn't had a lot of experience speaking. Now I speak a ton. And it's because CSSconf really gave me a shot at it. And now I'm here giving a keynote. So I just wanted to thank CSSconf and Bocoup for allowing me to be up here again. Thanks. \\[ Applause \\] So creativity in programming is kind of like a huge topic, right? And there's no way to talk about all of it in 30 minutes. I'm going to talk about some of the key points that really make a difference for me and why it's even worth discussing. I think creativity tends to be something we push off to the side as being not that important. And maybe like secondary to a lot of other processes. But I'm going to talk today about how it's core to all processes. And like I said, my name is Sarah Drasner. I take being up here very seriously. This is me as a child, as well as my relationship to authority. I am a Web technologies consultant. So I get hired by companies to come and help out with some of their tech staff, including SVG animations and component libraries. So let's dive right in. What does it mean to be creative? Like why are we talking about this? Programming is not something that you think about and think, like, oh, creativity. But programming is, in essence, a creative act. This is a very normal kind of interview prep question, Fizz buzz. How do you write it out? Two possible scenarios. These are two functionally equivalent solutions to fizz buzz. And they look different. Every time you're giving instructions to a computer you're really communicating with other people. The compiler sees it a completely different way than the way you type it. And Kyle Simpson talks about how we spend 70% of our time maintaining code and only 30% of it writing. So this kind of the way that we write things and the way that we're communicating with each other is an act of creativity. It's the way we're expressing ourselves. The one on the bottom, only 58 characters, was a creative endeavor. That's not something you're probably going to put in a code base like the one on the top you can read and communicate with more humans more easily. So it's important to your business. When we're talking about, like, creative forces and questioning things and why we're even engaging in this, it might seem like that's secondary to business efforts, but Hewlett Packard puts a good amount of money into R&D. In 1999, $2 million and saw profits of 42.37 billion. That was a huge return on investment. Frito Lay had a cost savings of $600 million due to creativity programs. And CEOs, when interviewed say that creativity across the board is the number one thing they look for in potential candidates. Over being hard working, over being loyal. And that was a survey across 33 different industries and 60 different countries. It's also important for you. Let's go into why. A lot of you have probably heard of the phenomenon of flow. It's complete immersion in your tasks. What I mean by that, you lose track of time. You're engaged, totally, fully in that activity. You forget to go to the bathroom, forget to eat. Somebody has to tell you put the computer down now. Shares traits with hyper focus. And people get these two things mixed up a little bit. When you're really trained on finding the solution to something, you can be in hyper focus. But usually it's not the same thing. You will notice if you're hungry, stressed in hyper focus. Pushing out code for a deadline at work, you're often times in hyper focus, not in flow. And creative program tends to put you in a flow state. So you have a loss of self reflective consciousness and your experience of time is kind of altered. What ends up happening, people who experience flow talk about this being some of the happiest points in their entire life. So when we're talking about burn out at a company, if you're continually programming in order to get something pushed out and continually programming to get something done and you're stressed when you're programming, you have this association with programming and this stress. So it's actually like a way that you can fight burnout. Burnout is fought a lot of times by resting. But it's not the only way you can fight burn out. The way that your brain works, neural pathways get set, you have the joined synapse and they're firing, programming and stress and programming and stress, you lock those two things together. If you start to do creative activities, you start to refocus the neural pathways, join them. You actually increase plasticity in your brain and you can start to tie that creative and happiness and fun along to programming in a way that you didn't before. If you have done a side project that works really well. Sometimes I did really drudgey things at work and work on something that was a side project in my spare time, and come to work rejuvenated, feeling happy and excited. And that's contagious. That actually kind of ekes into all of your program processes. So flow plus this thinking can actually reduce stress and cause happiness while you're programming other tasks. So I made this kind of like little silly demo. If this is your understanding of things and these are all the things out there that you can learn, every time you're pulling something into that sphere, it's actually growing your understanding. But if you try to learn too much at once, it's not really going to work, right? You're going to glaze over it. You have to focus on that activity and bring it into that sphere. So we talked a lot about the whys. Now let's get into the hows. I'm just going to talk about my hows. I'm not going through every way you can go through creative programming. There's tons and tons of ways. But we're going to break down as many as possible in this short amount of time. So one big thing is questioning the base premises. Another is to impose artificial bounds. Another is re purposing, another is combining, and the last one is using open source as a tool. So let's start with questioning the base premises. Because that's a really, really big one. So when we're thinking linearly. Thinking A equals B, think of something like we reduce cost by spending less money, right? So if you're thinking laterally, okay, what if that's not true? What if we spend more money? What if we spend more money, but on fewer vendors, and place larger orders on some vendors and get bigger price breaks. The source here, if you want to read more, is igniting innovation. And more than a million dollars’ worth of savings at a company based on one hour creativity sessions. This is happening in programming as well. So you have the Ethernet. A series of computer networks, there were token ring networks. And you can think of token ring networks, they're kind of like planned or coordinated systems where it's similar to a talking stick in kindergarten. The kid holds and talks and passes it on. It's kind of coordinated and organized. What ether net did was question the base premise of that. What if we don't wait? What if we do a completely different system? An emergent system. That's a little bit more like a discussion. Computer cans all say stuff at the same time, but if they see somebody else is talking, they kind of back off. And this system is way more chaotic, but ended up being surprisingly more efficient. So React questioned base premises. Whether you like it or not, this was tons of weird best practicing thrown out the windows. What if we write in line JavaScript right in the component? What if we don't lose the DOM? Use a virtual DOM to be diving? What if we replace the syntax? These are base premises thrown out the window. Sass did this as well. We don't have X in CSS. CSS needed a hero. What if we have variables and four loops and mix ins and we can dry out our code? This shaped our specs. We didn't wait for variables in CSS. They are here now, and Lea is going to talk about them later today with a great talk. But this questioning and taking action actually pushed our Web forward. So the second thing that we can do is impose artificial balance. Sometimes when you look at a blank page or a blank state, if I was saying, you know why creativity is important. Go make a creative program. It's kind of okay. Where am I going to start? By imposing artificial bounds you have some rules to follow and some ways to be creative. A lot of times when you have an assignment for something, you find your brain is actively thinking of new ways of working with something. So I just wrote an article called the nerds guide to color on the Web and talked about MSLA. There's hexadecimals, and all these ways of working with color on the Web were meant so the computer knows what color you're using. But HSLA was special, so humans could understand what color. It used a way of thinking about color. So H, the hue, is rotating. It's a complete circle. So as I'm scrolling this list it's just going to go around in a circle. Whereas saturation goes from zero to 100%. Lightness, zero to 100%, and the opacity, zero to 100. Similar to 1 to 100%. I can do stuff? Sass, write colors and mix ins. This was done with this color function here. Also, because it's a full circle I can hope that my demo loads. On my local host server. What you're not seeing is a full circle of color. What's really nice about that is there's no errors. Even if I pass in 480 degrees, I'll still have a color. There's no like top or bottom. So another thing we can do with that, kind of impose balance. So I made this city construction site. Get it? It's like a Website. Bad, bad joke. I'm on a comedy stage. I got to. \\[ Laughter \\] And so I can hit this button and I can change the hues and saturation values. And this one's slightly different than the other one and not exactly the same. But they're relative color mixing. So they're going to play off of each other. And I can get weird colors and set it back to normal and play with perspective and do a lot of other weird stuff because it's fun. So and that's really simple. I'm using GreenSock in my animation. And they allow for the color mixing. Just caching the HSL, doing it relative to the color it's already at. So another way we can impose bounds and write artificial physics. If you have made Canvas or anything like that, it's familiar to you. If you're programming in the computer and you have a thing that's got …",{"id":582,"height":13,"width":12,"blurhash":583},"34025ce9-d138-47f3-bb59-331d92c0162b","radial-gradient(at 0 0,#f6e2ff,#00000000 50%),radial-gradient(at 33% 0,#f2ddeb,#00000000 50%),radial-gradient(at 67% 0,#ddc8d0,#00000000 50%),radial-gradient(at 100% 0,#f0d4e8,#00000000 50%),radial-gradient(at 0 50%,#d5ceea,#00000000 50%),radial-gradient(at 33% 50%,#d19bc3,#00000000 50%),radial-gradient(at 67% 50%,#a67e95,#00000000 50%),radial-gradient(at 100% 50%,#c7b2c2,#00000000 50%),radial-gradient(at 0 100%,#d6d3f2,#00000000 50%),radial-gradient(at 33% 100%,#c4b7ba,#00000000 50%),radial-gradient(at 67% 100%,#83748f,#00000000 50%),radial-gradient(at 100% 100%,#b79ecb,#00000000 50%)",{"id":585,"height":15,"width":14,"blurhash":52},"609195a9-03ec-4d0c-abb1-def71319b2a9",[587,590,593,596,599,602,605,608,611,614,617,620,623,626,629,632,635,638,641,644,647,650,653,656,659,662,665,668,671,674],{"directus_files_id":588},{"id":589},"679338d4-dfed-4f32-8e82-94c1fc028990",{"directus_files_id":591},{"id":592},"166440e2-555f-4e8e-b007-076a10a04a79",{"directus_files_id":594},{"id":595},"859b257d-1a6d-4978-baae-0a4abe617a14",{"directus_files_id":597},{"id":598},"612b157f-52b0-4623-aae7-8446082a8523",{"directus_files_id":600},{"id":601},"8302331c-87cc-41e4-b230-42b7bdb46fa7",{"directus_files_id":603},{"id":604},"ff23b1cc-cfd8-4a33-a758-011337b554ba",{"directus_files_id":606},{"id":607},"079e5980-f0e1-4a32-9fa2-27d1242318d1",{"directus_files_id":609},{"id":610},"67185060-8bd4-43ca-9bb2-50faf52081d8",{"directus_files_id":612},{"id":613},"fc8276cb-d4d5-4905-a158-5ae79f795077",{"directus_files_id":615},{"id":616},"8feaff22-66cd-4378-b568-896e7e2b6afc",{"directus_files_id":618},{"id":619},"93b04a75-660c-472b-aada-88d390b5a863",{"directus_files_id":621},{"id":622},"e42bf40c-681d-4a61-9550-806b343adc1f",{"directus_files_id":624},{"id":625},"23f4bc0d-5d8c-46e8-9c0c-71c125b5ce92",{"directus_files_id":627},{"id":628},"22841888-0624-4a60-bce9-e7180edf43f7",{"directus_files_id":630},{"id":631},"7a8488e0-f3b0-4db1-bc57-ae11a15271f7",{"directus_files_id":633},{"id":634},"43a85ba8-01cd-4277-9a0e-a8522c3b5d62",{"directus_files_id":636},{"id":637},"b59b294d-cba7-48c0-8169-3b8fde5f1d25",{"directus_files_id":639},{"id":640},"2e089d7e-d454-48bf-9c5c-d2c526a6ec39",{"directus_files_id":642},{"id":643},"b14d089e-e348-4ca6-ba66-7e28d84ba262",{"directus_files_id":645},{"id":646},"7856ddf3-ca62-4ecf-9803-b233514a7551",{"directus_files_id":648},{"id":649},"a68d492c-92d1-4b0f-a2c9-1c92809ee771",{"directus_files_id":651},{"id":652},"08531fab-7e34-4fb8-a98c-9306d8b0054d",{"directus_files_id":654},{"id":655},"f2ec4b12-f72e-4371-bae6-37afdbeca83c",{"directus_files_id":657},{"id":658},"7b8be704-1a18-492c-9dff-2a3d7da1bc6b",{"directus_files_id":660},{"id":661},"a49822cf-8150-4d82-8d83-e9a4a49ee1ee",{"directus_files_id":663},{"id":664},"990fdc5a-77d6-4809-a1fa-e1f8eb565468",{"directus_files_id":666},{"id":667},"3108ab9a-ecd9-4a8e-bc88-585edc22e70f",{"directus_files_id":669},{"id":670},"e432d0a4-e1eb-4362-9595-52bcaf6a0d8b",{"directus_files_id":672},{"id":673},"f7e0cd58-7572-46ce-861d-60c086a8c43c",{"directus_files_id":675},{"id":676},"3d722099-1a0b-441e-9b98-842bfc3463ed",[678],{"languages_code":413,"description":679},"CSSConf 2016 serves as a digital archive and landing page for a premier web development conference. Its primary purpose is to provide developers and designers with access to recorded sessions, presentation slides, and transcripts, ensuring the knowledge shared during the live event in Boston remains accessible to the global tech community.\n\nThe visual identity is a masterclass in high-energy, expressive design that breaks away from the sterile aesthetics often found in tech. Utilizing a vibrant palette of neon pinks, purples, and teals, the site employs organic, fluid shapes and heavy typographic elements to create a sense of movement and creativity. The juxtaposition of playful, colorful blobs against monochromatic photography creates a sophisticated yet approachable atmosphere tailored for a creative, forward-thinking audience of front-end engineers and designers.","Technology & Hardware",[682,550,683],"Fun \u002F Playful","Vibrant \u002F Colorful",[],[],[285,274,687,288],"Snap.svg",[689,691,693,694],{"score":690,"category":92},48,{"score":692,"category":95},66,{"score":198,"category":98},{"score":423,"category":101},[696,697,698,699],{"score":159,"category":92},{"score":692,"category":95},{"score":198,"category":98},{"score":423,"category":101},[118,701,114,110,702],"pink","green","Website: CSSConf. Page: Homepage. Page type: Home \u002F Landing Page. Page title: Home | CSSConf US 2016. Page description: CSS Conf 2016. Page content: Skip to main content About Videos & Slides Sponsors Boston, MA Sept 26-27 2016 Videos & Slides The Conference CSSConf is a conference dedicated to the designers, developers and engineers who build the world’s most engaging user interfaces. The presenters push the boundaries of what is possible — talking about the latest technologies, cutting edge techniques, and tools. CSSConf 2016 takes the show on the road anew, bringing two days of talks from experts around the community to Boston! Part of the international CSSconf family CSSconf Family Since the first CSSconf US in 2013, the CSSconf family has expanded around the globe. All CSSconf organizer teams share the vision of an international, diverse and creative CSS community, for which the CSSconf series offers a platform to meet, hack, share knowledge and build friendships. Talk Videos Sarah Drasner Creativity in Programming for Fun and Profit \\>> SARAH: Is that good? You have to do a lot of height adjustments when you're my size. All right. I'm Sarah Drasner. Hear to talk about creativity and programming for fun and profit. One of the really awesome things about being on this stage is that about a year ago I was on the stage before and I hadn't had a lot of experience speaking. Now I speak a ton. And it's because CSSconf really gave me a shot at it. And now I'm here giving a keynote. So I just wanted to thank CSSconf and Bocoup for allowing me to be up here again. Thanks. \\[ Applause \\] So creativity in programming is kind of like a huge topic, right? And there's no way to talk about all of it in 30 minutes. I'm going to talk about some of the key points that really make a difference for me and why it's even worth discussing. I think creativity tends to be something we push off to the side as being not that important. And maybe like secondary to a lot of other processes. But I'm going to talk today about how it's core to all processes. And like I said, my name is Sarah Drasner. I take being up here very seriously. This is me as a child, as well as my relationship to authority. I am a Web technologies consultant. So I get hired by companies to come and help out with some of their tech staff, including SVG animations and component libraries. So let's dive right in. What does it mean to be creative? Like why are we talking about this? Programming is not something that you think about and think, like, oh, creativity. But programming is, in essence, a creative act. This is a very normal kind of interview prep question, Fizz buzz. How do you write it out? Two possible scenarios. These are two functionally equivalent solutions to fizz buzz. And they look different. Every time you're giving instructions to a computer you're really communicating with other people. The compiler sees it a completely different way than the way you type it. And Kyle Simpson talks about how we spend 70% of our time maintaining code and only 30% of it writing. So this kind of the way that we write things and the way that we're communicating with each other is an act of creativity. It's the way we're expressing ourselves. The one on the bottom, only 58 characters, was a creative endeavor. That's not something you're probably going to put in a code base like the one on the top you can read and communicate with more humans more easily. So it's important to your business. When we're talking about, like, creative forces and questioning things and why we're even engaging in this, it might seem like that's secondary to business efforts, but Hewlett Packard puts a good amount of money into R&D. In 1999, $2 million and saw profits of 42.37 billion. That was a huge return on investment. Frito Lay had a cost savings of $600 million due to creativity programs. And CEOs, when interviewed say that creativity across the board is the number one thing they look for in potential candidates. Over being hard working, over being loyal. And that was a survey across 33 different industries and 60 different countries. It's also important for you. Let's go into why. A lot of you have probably heard of the phenomenon of flow. It's complete immersion in your tasks. What I mean by that, you lose track of time. You're engaged, totally, fully in that activity. You forget to go to the bathroom, forget to eat. Somebody has to tell you put the computer down now. Shares traits with hyper focus. And people get these two things mixed up a little bit. When you're really trained on finding the solution to something, you can be in hyper focus. But usually it's not the same thing. You will notice if you're hungry, stressed in hyper focus. Pushing out code for a deadline at work, you're often times in hyper focus, not in flow. And creative program tends to put you in a flow state. So you have a loss of self reflective consciousness and your experience of time is kind of altered. What ends up happening, people who experience flow talk about this being some of the happiest points in their entire life. So when we're talking about burn out at a company, if you're continually programming in order to get something pushed out and continually programming to get something done and you're stressed when you're programming, you have this association with programming and this stress. So it's actually like a way that you can fight burnout. Burnout is fought a lot of times by resting. But it's not the only way you can fight burn out. The way that your brain works, neural pathways get set, you have the joined synapse and they're firing, programming and stress and programming and stress, you lock those two things together. If you start to do creative activities, you start to refocus the neural pathways, join them. You actually increase plasticity in your brain and you can start to tie that creative and happiness and fun along to programming in a way that you didn't before. If you have done a side project that works really well. Sometimes I did really drudgey things at work and work on something that was a side project in my spare time, and come to work rejuvenated, feeling happy and excited. And that's contagious. That actually kind of ekes into all of your program processes. So flow plus this thinking can actually reduce stress and cause happiness while you're programming other tasks. So I made this kind of like little silly demo. If this is your understanding of things and these are all the things out there that you can learn, every time you're pulling something into that sphere, it's actually growing your understanding. But if you try to learn too much at once, it's not really going to work, right? You're going to glaze over it. You have to focus on that activity and bring it into that sphere. So we talked a lot about the whys. Now let's get into the hows. I'm just going to talk about my hows. I'm not going through every way you can go through creative programming. There's tons and tons of ways. But we're going to break down as many as possible in this short amount of time. So one big thing is questioning the base premises. Another is to impose artificial bounds. Another is re purposing, another is combining, and the last one is using open source as a tool. So let's start with questioning the base premises. Because that's a really, really big one. So when we're thinking linearly. Thinking A equals B, think of something like we reduce cost by spending less money, right? So if you're thinking laterally, okay, what if that's not true? What if we spend more money? What if we spend more money, but on fewer vendors, and place larger orders on some vendors and get bigger price breaks. The source here, if you want to read more, is igniting innovation. And more than a million dollars’ worth of savings at a company based on one hour creativity sessions. This is happening in programming as well. So you have the Ethernet. A series of computer networks, there were token ring networks. And you can think of token ring networks, they're kind of like planned or coordinated systems where it's similar to a talking stick in kindergarten. The kid holds and talks and passes it on. It's kind of coordinated and organized. What ether net did was question the base premise of that. What if we don't wait? What if we do a completely different system? An emergent system. That's a little bit more like a discussion. Computer cans all say stuff at the same time, but if they see somebody else is talking, they kind of back off. And this system is way more chaotic, but ended up being surprisingly more efficient. So React questioned base premises. Whether you like it or not, this was tons of weird best practicing thrown out the windows. What if we write in line JavaScript right in the component? What if we don't lose the DOM? Use a virtual DOM to be diving? What if we replace the syntax? These are base premises thrown out the window. Sass did this as well. We don't have X in CSS. CSS needed a hero. What if we have variables and four loops and mix ins and we can dry out our code? This shaped our specs. We didn't wait for variables in CSS. They are here now, and Lea is going to talk about them later today with a great talk. But this questioning and taking action actually pushed our Web forward. So the second thing that we can do is impose artificial balance. Sometimes when you look at a blank page or a blank state, if I was saying, you know why creativity is important. Go make a creative program. It's kind of okay. Where am I going to start? By imposing artificial bounds you have some rules to follow and some ways to be creative. A lot of times when you have an assignment for something, you find your brain is actively thinking of new ways of working with something. So I just wrote an article called the nerds guide to color on the Web and talked about MSLA. There's hexadecimals, and all these ways of working with color on the Web were meant so the computer knows what color you're using. But HSLA was special, so humans could understand what color. It used a way of thinking about color. So H, the hue, is rotating. It's a complete circle. So as I'm scrolling this list it's just going to go around in a circle. Whereas saturation goes from zero to 100%. Lightness, zero to 100%, and the opacity, zero to 100. Similar to 1 to 100%. I can do stuff? Sass, write colors and mix ins. This was done with this color function here. Also, because it's a full circle I can hope that my demo loads. On my local host server. What you're not seeing is a full circle of color. What's really nice about that is there's no errors. Even if I pass in 480 degrees, I'll still have a color. There's no like top or bottom. So another thing we can do with that, kind of impose balance. So I made this city construction site. Get it? It's like a Website. Bad, bad joke. I'm on a comedy stage. I got to. \\[ Laughter \\] And so I can hit this button and I can change the hues and saturation values. And this one's slightly different than the other one and not exactly the same. But they're relative color mixing. So they're going to play off of each other. And I can get weird colors and set it back to normal and play with perspective and do a lot of other weird stuff because it's fun. So and that's really simple. I'm using GreenSock in my animation. And they allow for the color mixing. Just caching the HSL, doing it relative to the color it's already at. So another way we can impose bounds and write artificial physics. If you have made Canvas or anything like that, it's familiar to you. If you're programming in the computer and you have a thing that's got …. A Fun \u002F Playful, Typographic \u002F Big Type, Vibrant \u002F Colorful website in the Technology & Hardware industry. The overall color palette features White, Pink, Gray, Black, Green. Built using Amazon Web Services, jQuery, Snap.svg, YouTube. AI description: CSSConf 2016 serves as a digital archive and landing page for a premier web development conference. Its primary purpose is to provide developers and designers with access to recorded sessions, presentation slides, and transcripts, ensuring the knowledge shared during the live event in Boston remains accessible to the global tech community. The visual identity is a masterclass in high-energy, expressive design that breaks away from the sterile aesthetics often found in tech. Utilizing a vibrant palette of neon pinks, purples, and teals, the site employs organic, fluid shapes and heavy typographic elements to create a sense of movement and creativity. The juxtaposition of playful, colorful blobs against monochromatic photography creates a sophisticated yet approachable atmosphere tailored for a creative, forward-thinking audience of front-end engineers and designers.",{"id":705,"website_id":706,"page_id":705,"name":707,"slug":708,"url":709,"website_name":707,"website_slug":708,"website_url":710,"result_url":709,"fetched_at":711,"score":445,"score_boost":348,"ai_score":575,"freshness_score":198,"scored_at":712,"page_name":39,"page_url":709,"page_title":713,"page_description":714,"page_content":715,"page_sort":348,"is_home":53,"is_home_rank":353,"page_type_id":354,"page_type_name":45,"cover":716,"cover_mobile":719,"cover_sequence":721,"translations":812,"industry":680,"styles":815,"credits":816,"font_families":819,"technologies":821,"pagespeed":822,"pagespeed_mobile":828,"buckets":833,"search_payload":834},"898e29da-b612-43a9-ba96-a7a4fb394fd4","fd4cce9e-7f61-425a-ba51-dc2ea3eda282","OneClock","oneclock","https:\u002F\u002Foneclock.co\u002F","https:\u002F\u002Foneclock.co","2026-05-03T17:41:58.000Z","2026-05-23T20:28:12.000Z","OneClock | Wake up better","A disconnected analog alarm clock that wakes you up with beautiful music.","- [ Buy 2 or more get $50 off each](\u002Fpurchase) - [ Buy 2 or more get $50 off each](\u002Fpurchase) - [ Buy 2 or more get $50 off each](\u002Fpurchase) - [ Buy 2 or more get $50 off each](\u002Fpurchase) - [ Buy 2 or more get $50 off each](\u002Fpurchase) Purchase 1. OneClock 2. Music 3. Reviews 4. FAQ 5. Blog Contact hello@oneclock.co Info - Instagram - Setup - Blog - Press - Stockists - Refurbished - Shipping - Warranty & Returns - Terms and Conditions - Privacy Policy Logo one A disconnected analog alarm clock that wakes you up with beautiful music. clock Wake Up Better Sleep Science How we wake up has a direct effect on the way we feel - it contributes to our daily mood, energy and behavior. OneClock's music activates your brain gradually, to wake you calmly and gently. Slow-Tech OneClock is designed to replace your alarm and encourage a phone free bedroom - no screens, no Bluetooth, no WiFi, no apps, no notifications - just warm, organic minimalism and a tactile analog experience. Sonic Research We researched the best tones, tempos, and frequencies to wake you up gently, and worked with award-winning musicians to create exclusive waking compositions. Swiss movement Low light emission 100% silent Touch sensitive Light Hifi speaker Grammy Winning Composer Jon Natchez The War on Drugs Loud, jarring sounds create stress and negatively impact your nervous system. We asked Grammy Award winning composer Jon Natchez from The War on Drugs to create a collection of musical compositions to help you wake up better. Read more on our blog Waking music made exclusively for OneClock. Explore the Sounds Soft to Loud(er) Progressive Melodic Organic Generative Range Detail Materials Powder coated aluminum FSC Certified wood Glass Clock Swiss designed 12-hour analog movement On-demand top-tap night light 100% silent Audio High performance balanced mode radiator speaker Adjustable waking volume Power USB-C cord with detachable AC power adapter (US) Blackout protection preserves time and alarm settings Designed in Boulder, CO 4.4×3.5×7.1 in 2.7 lbs 11.2×8.9×18 cm 1.2 kg Visually Pleasing The proportions of OneClock are based on the golden ratio. 1:1.618 The OneClock Story A few years ago, my wife and I committed to getting our phones out of our bedroom and taking our sleep seriously. But I still needed an alarm clock. I wanted something simple -- a tactile timepiece that would last a lifetime and sound amazing, without WiFi or Bluetooth. I searched everywhere for a modern analog clock that would wake me up with beautiful music, but I couldn’t find it, so I made it. Jamie Kripke Founder Follow our journey As Seen In The CoolectorColossalNew York TimesGear PatrolForbesDominoThe StrategistCool HuntingCore 77 Yahoo5280The CoolectorColossalNew York TimesGear PatrolForbesDominoThe Strategist Cool HuntingCore 77Yahoo5280The CoolectorColossalNew York TimesGear PatrolForbes DominoThe StrategistCool HuntingCore 77Yahoo5280The CoolectorColossalNew York TimesGear PatrolForbesDominoThe StrategistCool HuntingCore 77Yahoo5280 Customer Reviews 4.43 262 Reviews Mikhail Taboryski Verified Buyer A new reality The desire for something made of quality components that follows through on its promises is a rare thing in today's world. I felt like it was a bit of a gamble at the price point, but it was worth it. The music is a whole new way to wake up that just feels, clean. Even the most soothing alarm tone on my phone feels out of place by comparison. Thank you for all the effort and thought that went into this simple, yet crucial piece of home hardware. Cathlin Walker Verified Buyer Love it. I love it. It’s stunningly simple, classic. Well made. Anonymous Verified Buyer The One Clock in Juba, South Sudan Living in a Containerized Housing Unit (CHU) at the U.S. Embassy in Juba makes sleep a rare commodity. Between the constant vigilance for \"duck and cover\" alarms and the psychological weight of being on edge, rest is often fragmented. I noticed a recurring pattern: I’d wake up between 2:00 AM and 3:00 AM, whether due to age or stress, I’m not sure, and immediately reach for my iPhone. Since Juba is eight hours ahead of my family in Santa Fe, there was almost always a notification waiting for me. One message could easily lead down a rabbit hole, and suddenly it would be 4:00 AM with a 5:30 AM wake-up call looming. To break this cycle, I replaced my phone with a beautiful analog One Clock. It’s more than just a functional tool; its design brings a sense of \"analog simplicity\" and aesthetic calm to my room that a standard \"Big Ben\" clock never could. Now, my iPhones charge in another room overnight. The change has been noticeable. I wake up to a different surprise track of music every morning, often lying still for a minute just to listen. Best of all, I am finally sleeping through the night, something that hasn't happened in a very long time. I attribute this newfound peace entirely to removing the digital distractions and surrounding myself with a piece of work that feels truly special. Suzanne Puttman Verified Buyer A forever piece I wanted a subtler sounding clock to wake me up that was also aestically pleasing. More FAQ Everything you wanted to know Contact hello@oneclock.co Info - Instagram - Setup - Blog - Press - Stockists - Refurbished - Shipping - Warranty & Returns - Terms and Conditions - Privacy Policy Purchase 1. OneClock 2. Music 3. Reviews 4. FAQ 5. Blog Contact hello@oneclock.co Info - Instagram - Setup - Blog - Press - Stockists - Refurbished - Shipping - Warranty & Returns - Terms and Conditions - Privacy Policy Logo Wake Up Better OneClock - - - White + Oak $349 with Free Shipping 30 Day Returns \\-+ Add to cart OneClock is a truly disconnected analog alarm clock that gently wakes you with exclusive music made by human musicians. It's designed for optimal sleep so you can rest more deeply, wake up more beautifully, and start your day better. Crafted from precision aluminum, wood, and glass, with dedicated AC power. Reviews [ 4.43 262 Reviews ](\u002F#reviews) Pay in 4 installments Follow OneClock on Instagram",{"id":717,"height":13,"width":12,"blurhash":718},"97065179-e0c2-4c44-915e-f9db9018f43e","radial-gradient(at 0 0,#d1d2d0,#00000000 50%),radial-gradient(at 33% 0,#bdb5ab,#00000000 50%),radial-gradient(at 67% 0,#cdc8c0,#00000000 50%),radial-gradient(at 100% 0,#e2ddd9,#00000000 50%),radial-gradient(at 0 50%,#e0ded9,#00000000 50%),radial-gradient(at 33% 50%,#cdc1bb,#00000000 50%),radial-gradient(at 67% 50%,#eeebe9,#00000000 50%),radial-gradient(at 100% 50%,#ffffff,#00000000 50%),radial-gradient(at 0 100%,#d2d4d2,#00000000 50%),radial-gradient(at 33% 100%,#aca6a5,#00000000 50%),radial-gradient(at 67% 100%,#dadad7,#00000000 50%),radial-gradient(at 100% 100%,#fcfdfb,#00000000 50%)",{"id":720,"height":15,"width":14,"blurhash":52},"99352150-1292-4e2a-b184-dab5bc3f08f8",[722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794,797,800,803,806,809],{"directus_files_id":723},{"id":724},"d98a1483-5c4e-41d4-bbbc-08bb89f85132",{"directus_files_id":726},{"id":727},"b48996b5-ed62-4c09-b49c-17516f4134a8",{"directus_files_id":729},{"id":730},"ae2b499c-ecf1-4c8a-bb33-d80f30b13523",{"directus_files_id":732},{"id":733},"ceaab242-6109-4516-a133-987575f81713",{"directus_files_id":735},{"id":736},"21d265b5-2843-4af9-8be9-8479ccb2204d",{"directus_files_id":738},{"id":739},"b8aebf5f-1293-41e4-b51e-97218d0ec70a",{"directus_files_id":741},{"id":742},"c9263fdc-00ca-4b51-8671-00426c1173e9",{"directus_files_id":744},{"id":745},"0d79fc94-33bb-45f9-b9ba-af8f574f2124",{"directus_files_id":747},{"id":748},"3b6b8f18-82ca-4868-ab77-9c444b7c54d6",{"directus_files_id":750},{"id":751},"0453e3a6-58d9-4df7-8de6-9cba858d6d73",{"directus_files_id":753},{"id":754},"98070a60-c0bf-4a6e-ae72-d334135c5c09",{"directus_files_id":756},{"id":757},"d2077e85-c208-4de3-9743-8a2ead399b82",{"directus_files_id":759},{"id":760},"c9ca8cd0-7f6d-4a55-bb5d-e2ac9452e8bd",{"directus_files_id":762},{"id":763},"ea857db4-8293-4dcc-ae94-16151ff6c1ef",{"directus_files_id":765},{"id":766},"7ac50793-b4aa-4642-90fd-a25589a5d42a",{"directus_files_id":768},{"id":769},"13733b4d-a05c-4192-9fec-26868b1e5dc0",{"directus_files_id":771},{"id":772},"0078d369-3522-48b4-9360-ac01b9fbfbed",{"directus_files_id":774},{"id":775},"3abcb757-ab90-436d-b77c-97110d8de80f",{"directus_files_id":777},{"id":778},"99f1d562-4b58-452a-a35a-65098a308962",{"directus_files_id":780},{"id":781},"7e77a5b7-ad8b-4303-b2a2-98e1e93ac28a",{"directus_files_id":783},{"id":784},"e088942c-294c-41a1-8f98-a9f37473ae45",{"directus_files_id":786},{"id":787},"c29dc223-a6a5-4698-bd84-5e3afd8f370a",{"directus_files_id":789},{"id":790},"e3bbddb7-750d-4ff1-8b19-a92d00727834",{"directus_files_id":792},{"id":793},"5ba5595d-45b6-4844-bc42-cd1a14ab3469",{"directus_files_id":795},{"id":796},"9e885513-70c9-42a4-9926-97d8687f178a",{"directus_files_id":798},{"id":799},"22fa27d9-90ac-4332-b366-0f6c42b856ed",{"directus_files_id":801},{"id":802},"91fcdd0a-2b3d-4b6f-a0d3-8656a7faae7b",{"directus_files_id":804},{"id":805},"24ecf8f9-826e-4443-bb04-a1ff96971a99",{"directus_files_id":807},{"id":808},"8aec8e83-6536-4ae2-a96b-71f75023e01d",{"directus_files_id":810},{"id":811},"a0f2297f-8067-4913-addc-f45f03cd039b",[813],{"languages_code":413,"description":814},"OneClock is a premium wellness brand dedicated to revolutionizing the morning ritual through a disconnected, analog alarm clock experience. By prioritizing music-driven, gentle wake-up calls over jarring digital interruptions, the brand positions itself at the intersection of sleep science and mindful living. The website serves as a high-conversion landing page designed to educate consumers on the physiological benefits of their product while facilitating seamless e-commerce transactions.\n\nThe visual identity is sophisticated and editorial, utilizing a high-fashion aesthetic to appeal to a wellness-conscious, design-oriented demographic. The design employs bold, oversized typography and a muted, earthy color palette that evokes a sense of calm and luxury. Through the use of evocative lifestyle photography and ample white space, the brand communicates a lifestyle of intentionality and tranquility, moving away from the frantic energy of typical tech hardware sites.",[33,29,550],[817,818],"Sons & co.","Nadia Umi",[302,302,302,302,820],"The Future",[282,281,277,278,88],[823,824,825,827],{"score":174,"category":92},{"score":197,"category":95},{"score":826,"category":98},92,{"score":423,"category":101},[829,830,831,832],{"score":225,"category":92},{"score":197,"category":95},{"score":826,"category":98},{"score":423,"category":101},[118,114,110],"Website: OneClock. Page: Homepage. Page type: Home \u002F Landing Page. Page title: OneClock | Wake up better. Page description: A disconnected analog alarm clock that wakes you up with beautiful music.. Page content: - [ Buy 2 or more get $50 off each](\u002Fpurchase) - [ Buy 2 or more get $50 off each](\u002Fpurchase) - [ Buy 2 or more get $50 off each](\u002Fpurchase) - [ Buy 2 or more get $50 off each](\u002Fpurchase) - [ Buy 2 or more get $50 off each](\u002Fpurchase) Purchase 1. OneClock 2. Music 3. Reviews 4. FAQ 5. Blog Contact hello@oneclock.co Info - Instagram - Setup - Blog - Press - Stockists - Refurbished - Shipping - Warranty & Returns - Terms and Conditions - Privacy Policy Logo one A disconnected analog alarm clock that wakes you up with beautiful music. clock Wake Up Better Sleep Science How we wake up has a direct effect on the way we feel - it contributes to our daily mood, energy and behavior. OneClock's music activates your brain gradually, to wake you calmly and gently. Slow-Tech OneClock is designed to replace your alarm and encourage a phone free bedroom - no screens, no Bluetooth, no WiFi, no apps, no notifications - just warm, organic minimalism and a tactile analog experience. Sonic Research We researched the best tones, tempos, and frequencies to wake you up gently, and worked with award-winning musicians to create exclusive waking compositions. Swiss movement Low light emission 100% silent Touch sensitive Light Hifi speaker Grammy Winning Composer Jon Natchez The War on Drugs Loud, jarring sounds create stress and negatively impact your nervous system. We asked Grammy Award winning composer Jon Natchez from The War on Drugs to create a collection of musical compositions to help you wake up better. Read more on our blog Waking music made exclusively for OneClock. Explore the Sounds Soft to Loud(er) Progressive Melodic Organic Generative Range Detail Materials Powder coated aluminum FSC Certified wood Glass Clock Swiss designed 12-hour analog movement On-demand top-tap night light 100% silent Audio High performance balanced mode radiator speaker Adjustable waking volume Power USB-C cord with detachable AC power adapter (US) Blackout protection preserves time and alarm settings Designed in Boulder, CO 4.4×3.5×7.1 in 2.7 lbs 11.2×8.9×18 cm 1.2 kg Visually Pleasing The proportions of OneClock are based on the golden ratio. 1:1.618 The OneClock Story A few years ago, my wife and I committed to getting our phones out of our bedroom and taking our sleep seriously. But I still needed an alarm clock. I wanted something simple -- a tactile timepiece that would last a lifetime and sound amazing, without WiFi or Bluetooth. I searched everywhere for a modern analog clock that would wake me up with beautiful music, but I couldn’t find it, so I made it. Jamie Kripke Founder Follow our journey As Seen In The CoolectorColossalNew York TimesGear PatrolForbesDominoThe StrategistCool HuntingCore 77 Yahoo5280The CoolectorColossalNew York TimesGear PatrolForbesDominoThe Strategist Cool HuntingCore 77Yahoo5280The CoolectorColossalNew York TimesGear PatrolForbes DominoThe StrategistCool HuntingCore 77Yahoo5280The CoolectorColossalNew York TimesGear PatrolForbesDominoThe StrategistCool HuntingCore 77Yahoo5280 Customer Reviews 4.43 262 Reviews Mikhail Taboryski Verified Buyer A new reality The desire for something made of quality components that follows through on its promises is a rare thing in today's world. I felt like it was a bit of a gamble at the price point, but it was worth it. The music is a whole new way to wake up that just feels, clean. Even the most soothing alarm tone on my phone feels out of place by comparison. Thank you for all the effort and thought that went into this simple, yet crucial piece of home hardware. Cathlin Walker Verified Buyer Love it. I love it. It’s stunningly simple, classic. Well made. Anonymous Verified Buyer The One Clock in Juba, South Sudan Living in a Containerized Housing Unit (CHU) at the U.S. Embassy in Juba makes sleep a rare commodity. Between the constant vigilance for \"duck and cover\" alarms and the psychological weight of being on edge, rest is often fragmented. I noticed a recurring pattern: I’d wake up between 2:00 AM and 3:00 AM, whether due to age or stress, I’m not sure, and immediately reach for my iPhone. Since Juba is eight hours ahead of my family in Santa Fe, there was almost always a notification waiting for me. One message could easily lead down a rabbit hole, and suddenly it would be 4:00 AM with a 5:30 AM wake-up call looming. To break this cycle, I replaced my phone with a beautiful analog One Clock. It’s more than just a functional tool; its design brings a sense of \"analog simplicity\" and aesthetic calm to my room that a standard \"Big Ben\" clock never could. Now, my iPhones charge in another room overnight. The change has been noticeable. I wake up to a different surprise track of music every morning, often lying still for a minute just to listen. Best of all, I am finally sleeping through the night, something that hasn't happened in a very long time. I attribute this newfound peace entirely to removing the digital distractions and surrounding myself with a piece of work that feels truly special. Suzanne Puttman Verified Buyer A forever piece I wanted a subtler sounding clock to wake me up that was also aestically pleasing. More FAQ Everything you wanted to know Contact hello@oneclock.co Info - Instagram - Setup - Blog - Press - Stockists - Refurbished - Shipping - Warranty & Returns - Terms and Conditions - Privacy Policy Purchase 1. OneClock 2. Music 3. Reviews 4. FAQ 5. Blog Contact hello@oneclock.co Info - Instagram - Setup - Blog - Press - Stockists - Refurbished - Shipping - Warranty & Returns - Terms and Conditions - Privacy Policy Logo Wake Up Better OneClock - - - White + Oak $349 with Free Shipping 30 Day Returns \\-+ Add to cart OneClock is a truly disconnected analog alarm clock that gently wakes you with exclusive music made by human musicians. It's designed for optimal sleep so you can rest more deeply, wake up more beautifully, and start your day better. Crafted from precision aluminum, wood, and glass, with dedicated AC power. Reviews [ 4.43 262 Reviews ](\u002F#reviews) Pay in 4 installments Follow OneClock on Instagram. A Clean \u002F Minimalist, High-End \u002F Luxury, Typographic \u002F Big Type website in the Technology & Hardware industry. The overall color palette features White, Gray, Black. The typography features Neue Haas Grotesk (Sans Serif, Commercial Type), Neue Haas Grotesk (Sans Serif, Commercial Type), Neue Haas Grotesk (Sans Serif, Commercial Type), Neue Haas Grotesk (Sans Serif, Commercial Type), The Future (Sans Serif, Klim Type). Built using Klaviyo, Next.js, Node.js, React, Vercel. AI description: OneClock is a premium wellness brand dedicated to revolutionizing the morning ritual through a disconnected, analog alarm clock experience. By prioritizing music-driven, gentle wake-up calls over jarring digital interruptions, the brand positions itself at the intersection of sleep science and mindful living. The website serves as a high-conversion landing page designed to educate consumers on the physiological benefits of their product while facilitating seamless e-commerce transactions. The visual identity is sophisticated and editorial, utilizing a high-fashion aesthetic to appeal to a wellness-conscious, design-oriented demographic. The design employs bold, oversized typography and a muted, earthy color palette that evokes a sense of calm and luxury. Through the use of evocative lifestyle photography and ample white space, the brand communicates a lifestyle of intentionality and tranquility, moving away from the frantic energy of typical tech hardware sites."]