GeezerVisonThe World Wide Web, restored to 800 pixels of glory. |
| Home|About|Gaming cabinet|Archives|How it works|Starter sites |
GeezerVison is showing github.com — flashback/index.html at main · toby/flashback Expand file tree/ Copy pathindex.htmlMore file actions 2959 lines (2942 loc) · 158 KB / Copy pathindex.htmlFile metadata and controls2959 lines (2942 loc) · 158 KB 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌆</text></svg>"> <title>Flashback — A time machine for taste</title> <meta name="description" content="Flashback indexes design history year by year: theses, design climates, recipes, prompt seeds, and references an agent can use to ground a design task. 127 years indexed (1900-2026)."> <meta property="og:title" content="Flashback — A time machine for taste"> <meta property="og:description" content="An agentic design tool with a time machine for taste. 127 years indexed (1900-2026)."> <meta property="og:url" content="https://toby.github.io/flashback/"> <!-- Generated by scripts/flashback-examples.mjs from corpus. Do not hand-edit corpus-derived content. --> <style> :root { color-scheme: dark; --paper: #f3eee2; --muted: #a8a193; --line: rgba(243, 238, 226, 0.16); --bg-a: #0b0c10; --bg-b: #14151c; --bg-c: #070709; --accent: #ff4d2e; --accent-2: #35d0ff; --accent-3: #ffe150; --max: 1200px; --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Courier New", Courier, monospace; --serif: Georgia, "Times New Roman", serif; --shadow: 14px 14px 0 rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; color: var(--paper); font-family: var(--sans); line-height: 1.5; background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 26rem), radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 30rem), radial-gradient(circle at 72% 92%, color-mix(in srgb, var(--accent-3) 16%, transparent), transparent 32rem), linear-gradient(140deg, var(--bg-a), var(--bg-b) 50%, var(--bg-c)); } body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: 0.18; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 10px); mix-blend-mode: screen; } a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; } a:focus-visible { outline: 3px solid var(--accent-3); outline-offset: 3px; } .page { width: min(100% - 32px, var(--max)); margin: 0 auto; padding: clamp(28px, 6vw, 72px) 0 64px; } .footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .footer-links { display: inline-flex; gap: 18px; flex-wrap: wrap; } .masthead { margin-bottom: clamp(28px, 5vw, 52px); } .kicker { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.72rem; color: var(--muted); margin: 0 0 14px; } .wordmark { margin: 0; font-weight: 800; font-size: clamp(3rem, 12vw, 8rem); line-height: 0.92; letter-spacing: -0.03em; } .lede { max-width: 54ch; margin: 18px 0 0; font-size: clamp(1rem, 2.4vw, 1.25rem); color: color-mix(in srgb, var(--paper) 88%, transparent); } .meta { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 28px 0 0; padding: 0; } .meta div { display: flex; flex-direction: column; gap: 2px; } .meta dt { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; color: var(--muted); } .meta dd { margin: 0; font-size: 1.4rem; font-weight: 700; } .meta dd a { text-decoration: none; color: var(--accent-3); } .decades { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 clamp(30px, 5vw, 46px); padding: 0; } .decades a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 7px 12px; color: color-mix(in srgb, var(--paper) 82%, transparent); border: 1px solid var(--line); transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease; } .decades a:hover { color: #06070a; background: var(--accent-3); border-color: var(--accent-3); } .decade { margin: 0 0 clamp(38px, 6vw, 64px); scroll-margin-top: 24px; } .decade-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .decade-title { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; } .decade-note { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.2rem); color: color-mix(in srgb, var(--paper) 70%, transparent); } .console { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .year { --card-a: var(--accent); --card-b: var(--accent-2); --card-c: var(--accent-3); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border: 1px solid var(--line); border-top: 3px solid var(--card-a); background: rgba(0, 0, 0, 0.4); box-shadow: var(--shadow); transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .year:hover { transform: translate(-3px, -3px); box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.55); border-color: color-mix(in srgb, var(--card-b) 60%, var(--line)); } .year-open { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-decoration: none; } .year-num { font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .year-stamp { align-self: flex-start; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 5px 9px; color: #06070a; background: var(--card-c); white-space: nowrap; } .year-feeling { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.16rem; line-height: 1.3; color: color-mix(in srgb, var(--card-b) 70%, var(--paper)); } .year-sub { margin: 0; color: var(--muted); font-size: 0.92rem; } .year-lens { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .year-lens li { font-size: 0.72rem; font-family: var(--mono); letter-spacing: 0.02em; padding: 4px 8px; border: 1px solid var(--line); color: color-mix(in srgb, var(--paper) 82%, transparent); } .year-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; } .year-count { color: var(--muted); } .year-links { display: inline-flex; gap: 14px; } .year-links a { color: var(--card-b); text-underline-offset: 0.2em; } @media (prefers-reduced-motion: reduce) { .year { transition: none; } .year:hover { transform: none; } } </style> </head> <body> <main class="page"> <header class="masthead"> <p class="kicker">A time machine for taste — historically literate agentic design</p> <h1 class="wordmark">Flashback</h1> <p class="lede">Pick a year. Flashback excavates its design history — thesis, climate, recipes, anti-cliches, prompt seeds, and references — and uses it to ground a real design task.</p> <dl class="meta"> <div><dt>Years indexed</dt><dd>127</dd></div> <div><dt>Span</dt><dd>1900-2026</dd></div> <div><dt>Recipes</dt><dd>519</dd></div> <div><dt>Skill</dt><dd><a href="skill/index.html">/flashback</a></dd></div> <div><dt>Source</dt><dd><a href="https://github.com/toby/flashback">GitHub</a></dd></div> </dl> </header> <nav class="decades" aria-label="Jump to a decade"> <a href="#1900s">1900s</a> <a href="#1910s">1910s</a> <a href="#1920s">1920s</a> <a href="#1930s">1930s</a> <a href="#1940s">1940s</a> <a href="#1950s">1950s</a> <a href="#1960s">1960s</a> <a href="#1970s">1970s</a> <a href="#1980s">1980s</a> <a href="#1990s">1990s</a> <a href="#2000s">2000s</a> <a href="#2010s">2010s</a> <a href="#2020s">2020s</a> </nav> <section class="decade" id="1900s" aria-label="The 1900s"> <header class="decade-head"> <h2 class="decade-title">1900s</h2> <span class="decade-note">ornament meets the machine</span> </header> <div class="console"> <article class="year" style="--card-a: #9c6b3f; --card-b: #3f6b5e; --card-c: #b89150;"> <a class="year-open" href="examples/1900/index.html" aria-label="Open the 1900 example"> <span class="year-num">1900</span> <span class="year-stamp">Paris 1900</span> </a> <p class="year-feeling">the new century entering through an iron flower</p> <p class="year-sub">Paris opens the new century as a total designed spectacle: Art Nouveau entrances, electric pavilions, moving sidewalks, posters, gowns, glass, and co...</p> <ul class="year-lens"> <li>the Paris Exposition makes Art Nouveau, electricity, and spectacle public</li> <li>Guimard's Metro entrances turn infrastructure into botanical metalwork</li> <li>poster culture and color lithography make the street a designed surface</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1900/index.html">Example</a> <a href="corpus/1900.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #b8843d; --card-b: #9c4a3c; --card-c: #6f8f86;"> <a class="year-open" href="examples/1901/index.html" aria-label="Open the 1901 example"> <span class="year-num">1901</span> <span class="year-stamp">Secession line</span> </a> <p class="year-feeling">the floral line being squared into a room</p> <p class="year-sub">The Belle Epoque remains lush, but Glasgow, Darmstadt, Vienna, Buffalo, and Craftsman reform pull the curve toward structure, geometry, rooms, and sy...</p> <ul class="year-lens"> <li>Secession and Glasgow design make ornament flatter, squarer, and more architectural</li> <li>Darmstadt tests the artists' colony as a total designed environment</li> <li>The Craftsman turns American reform taste toward honest furniture and domestic moral clarity</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1901/index.html">Example</a> <a href="corpus/1901.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #caa23d; --card-b: #7a5230; --card-c: #a8472f;"> <a class="year-open" href="examples/1902/index.html" aria-label="Open the 1902 example"> <span class="year-num">1902</span> <span class="year-stamp">Turin 1902</span> </a> <p class="year-feeling">the decorative arts standing in public and naming their ambitions</p> <p class="year-sub">Turin gives Art Nouveau an international decorative-arts platform, Vienna stages Klimt's Beethoven Frieze, Photo-Secession forms in New York, and Mac...</p> <ul class="year-lens"> <li>Turin's decorative arts exhibition makes the new style international and comparative</li> <li>Vienna Secession turns exhibition design into a ritualized total environment</li> <li>Mackintosh's Hill House begins translating Glasgow severity into domestic architecture</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1902/index.html">Example</a> <a href="corpus/1902.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #9c5a3c; --card-b: #7d3b53; --card-c: #3f6b5e;"> <a class="year-open" href="examples/1903/index.html" aria-label="Open the 1903 example"> <span class="year-num">1903</span> <span class="year-stamp">Workshops</span> </a> <p class="year-feeling">the handmade ideal meeting the engine and the printed plate</p> <p class="year-sub">Wiener Werkstätte is founded, Camera Work begins, Ford Motor Company appears, and powered flight turns modern design toward workshops, media, mobilit...</p> <ul class="year-lens"> <li>Wiener Werkstätte makes the workshop into a coordinated modern brand</li> <li>Camera Work gives photography a luxurious printed voice</li> <li>Ford Motor Company and the Wright flight pull design toward mobility systems</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1903/index.html">Example</a> <a href="corpus/1903.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #9c6b3f; --card-b: #3f6b5e; --card-c: #b89150;"> <a class="year-open" href="examples/1904/index.html" aria-label="Open the 1904 example"> <span class="year-num">1904</span> <span class="year-stamp">Vienna grid</span> </a> <p class="year-feeling">ornament crossing a tiled platform into modern systems</p> <p class="year-sub">Vienna's workshops harden into geometric luxury, New York opens its subway, Mackintosh completes the Hill House, and Wright designs the Larkin Buildi...</p> <ul class="year-lens"> <li>Vienna 1900 moves from symbolic ornament toward coordinated geometric total design</li> <li>New York's subway makes metropolitan movement a tiled, signed, infrastructural experience</li> <li>Mackintosh's Hill House completes a severe domestic total artwork</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1904/index.html">Example</a> <a href="corpus/1904.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #b8843d; --card-b: #9c4a3c; --card-c: #6f8f86;"> <a class="year-open" href="examples/1905/index.html" aria-label="Open the 1905 example"> <span class="year-num">1905</span> <span class="year-stamp">Wild color</span> </a> <p class="year-feeling">elegance under pressure from wild color and hard edges</p> <p class="year-sub">Fauves explode color in Paris, Die Brücke forms in Dresden, and Vienna's total-design dream begins to harden into stone, mosaic, furniture, and brand...</p> <ul class="year-lens"> <li>fauvist color breaks naturalism into emotional signal</li> <li>die brucke turns youth, woodcut force, and urban anxiety into expressionist design pressure</li> <li>viennese total design moves from workshops into monumental domestic architecture</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1905/index.html">Example</a> <a href="corpus/1905.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #caa23d; --card-b: #7a5230; --card-c: #a8472f;"> <a class="year-open" href="examples/1906/index.html" aria-label="Open the 1906 example"> <span class="year-num">1906</span> <span class="year-stamp">Stone curve</span> </a> <p class="year-feeling">ornament learning to stand up as structure</p> <p class="year-sub">Gaudi begins Casa Mila, Vienna's disciplined reform spreads through furniture and interiors, and early cinema stretches from fairground novelty towar...</p> <ul class="year-lens"> <li>catalan modernisme turns organic line into urban stone</li> <li>secession discipline keeps simplifying ornament into geometry and total interiors</li> <li>arts and crafts ethics remain active but face commercial modernity</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1906/index.html">Example</a> <a href="corpus/1906.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #9c5a3c; --card-b: #7d3b53; --card-c: #3f6b5e;"> <a class="year-open" href="examples/1907/index.html" aria-label="Open the 1907 example"> <span class="year-num">1907</span> <span class="year-stamp">Werkbund</span> </a> <p class="year-feeling">the hand, the factory, and the fractured figure entering the same argument</p> <p class="year-sub">The Deutscher Werkbund forms, Peter Behrens joins AEG, and Picasso's studio rupture suggests that modern form can be corporate, geometric, and violen...</p> <ul class="year-lens"> <li>the deutscher werkbund links artists, architects, craft, and industry</li> <li>peter behrens begins turning aeg into an early corporate design system</li> <li>picasso's les demoiselles d'avignon breaks figure and space into modern fracture</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1907/index.html">Example</a> <a href="corpus/1907.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #9c6b3f; --card-b: #3f6b5e; --card-c: #b89150;"> <a class="year-open" href="examples/1908/index.html" aria-label="Open the 1908 example"> <span class="year-num">1908</span> <span class="year-stamp">Ornament trial</span> </a> <p class="year-feeling">the decorative century being cross-examined by cubes, cars, and plain walls</p> <p class="year-sub">Loos attacks ornament, Braque's L'Estaque paintings push form toward cubes, and the Ford Model T makes industrial modernity ordinary, affordable, and...</p> <ul class="year-lens"> <li>ornament and crime turns decoration into a moral argument</li> <li>cubism begins to name a new geometry of perception</li> <li>the ford model t makes mass industrial design a public fact</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1908/index.html">Example</a> <a href="corpus/1908.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #b8843d; --card-b: #9c4a3c; --card-c: #6f8f86;"> <a class="year-open" href="examples/1909/index.html" aria-label="Open the 1909 example"> <span class="year-num">1909</span> <span class="year-stamp">Speed myth</span> </a> <p class="year-feeling">speed and color claiming the future before anyone has agreed what the future is</p> <p class="year-sub">Marinetti publishes the Futurist Manifesto, the Ballets Russes detonates color in Paris, and industrial architecture learns to look like power itself.</p> <ul class="year-lens"> <li>futurism makes speed, machines, violence, and youth into a design myth</li> <li>the ballets russes brings russian color, costume, and stage design to paris</li> <li>aeg and behrens give industrial architecture monumental corporate form</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1909/index.html">Example</a> <a href="corpus/1909.md">Corpus.md</a> </span> </div> </article> </div> </section> <section class="decade" id="1910s" aria-label="The 1910s"> <header class="decade-head"> <h2 class="decade-title">1910s</h2> <span class="decade-note">the avant-garde detonates</span> </header> <div class="console"> <article class="year" style="--card-a: #c0341f; --card-b: #1d1b18; --card-c: #c79a3c;"> <a class="year-open" href="examples/1910/index.html" aria-label="Open the 1910 example"> <span class="year-num">1910</span> <span class="year-stamp">Futurist</span> </a> <p class="year-feeling">the old room struck by a motor and a lamp</p> <p class="year-sub">Futurism turns painting into a shout, Ballets Russes color floods Paris, and modern taste begins to prefer the stripped facade, the poster, and the m...</p> <ul class="year-lens"> <li>futurist manifestos convert speed, noise, and violence into visual principles</li> <li>Ballets Russes makes color, costume, and stage design feel newly electric</li> <li>Post-Impressionism reaches London as a scandal of modern seeing</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1910/index.html">Example</a> <a href="corpus/1910.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #33484f; --card-b: #cfa94a; --card-c: #2c2a26;"> <a class="year-open" href="examples/1911/index.html" aria-label="Open the 1911 example"> <span class="year-num">1911</span> <span class="year-stamp">Blue Rider</span> </a> <p class="year-feeling">color looking for a system and a soul</p> <p class="year-sub">Expressionist color organizes itself, Kandinsky gives abstraction a theory, and modern design begins to split between inner necessity and industrial...</p> <ul class="year-lens"> <li>color, music, folk art, and abstraction gather through Der Blaue Reiter</li> <li>spiritual necessity gives modern form a theory through Kandinsky</li> <li>futurism continues making speed and urban shock a visual method</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1911/index.html">Example</a> <a href="corpus/1911.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #b9923f; --card-b: #1c1f24; --card-c: #c43d2a;"> <a class="year-open" href="examples/1912/index.html" aria-label="Open the 1912 example"> <span class="year-num">1912</span> <span class="year-stamp">Collage</span> </a> <p class="year-feeling">reality cut into fragments and glued back as modern form</p> <p class="year-sub">Cubism pastes newspaper and oilcloth into art, Futurism reaches Paris, and modern design discovers that reality can be cut, glued, quoted, and reasse...</p> <ul class="year-lens"> <li>synthetic Cubism begins with collage, papier colle, and found printed matter</li> <li>the Futurists exhibit in Paris and turn speed into an international visual argument</li> <li>cubism becomes public, decorative, and architectural through Section d'Or and the Maison Cubiste</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1912/index.html">Example</a> <a href="corpus/1912.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #6f3b2c; --card-b: #a83a25; --card-c: #5a6b3f;"> <a class="year-open" href="examples/1913/index.html" aria-label="Open the 1913 example"> <span class="year-num">1913</span> <span class="year-stamp">Armory</span> </a> <p class="year-feeling">the public suddenly forced to process modern force</p> <p class="year-sub">The Armory Show carries European modernism to America, the Rite of Spring detonates the theater, and the machine body becomes sculpture, noise, and a...</p> <ul class="year-lens"> <li>the Armory Show makes modern art a mass American controversy</li> <li>music, choreography, costume, and scandal become one event through The Rite of Spring</li> <li>futurism expands into sculpture, noise, and the designed sensation of force</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1913/index.html">Example</a> <a href="corpus/1913.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #c0341f; --card-b: #1d1b18; --card-c: #c79a3c;"> <a class="year-open" href="examples/1914/index.html" aria-label="Open the 1914 example"> <span class="year-num">1914</span> <span class="year-stamp">Werkbund</span> </a> <p class="year-feeling">the design future drafted into history</p> <p class="year-sub">Werkbund standardization debates, glass utopias, Vorticist blasts, wartime posters, and early abstraction all arrive as Europe crosses from design ar...</p> <ul class="year-lens"> <li>the Cologne Werkbund exhibition turns standardization into a public design conflict</li> <li>war redirects graphic design toward recruitment, propaganda, and national address</li> <li>vorticism and futurism sharpen the page into angular, violent modern energy</li> </ul> <div class="year-foot"> <span class="year-count">5 recipes</span> <span class="year-links"> <a href="examples/1914/index.html">Example</a> <a href="corpus/1914.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #33484f; --card-b: #cfa94a; --card-c: #2c2a26;"> <a class="year-open" href="examples/1915/index.html" aria-label="Open the 1915 example"> <span class="year-num">1915</span> <span class="year-stamp">Zero-ten</span> </a> <p class="year-feeling">the page as battlefield and icon wall</p> <p class="year-sub">Black Square enters the icon corner, Futurism turns war and speed into a visual grammar, and public design learns that modern life needs stronger sig...</p> <ul class="year-lens"> <li>suprematism makes non-objective painting feel like a new visual law</li> <li>futurism treats speed, noise, machines, and war as compositional forces</li> <li>wartime posters turn illustration and direct address into mass persuasion</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1915/index.html">Example</a> <a href="corpus/1915.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #b9923f; --card-b: #1c1f24; --card-c: #c43d2a;"> <a class="year-open" href="examples/1916/index.html" aria-label="Open the 1916 example"> <span class="year-num">1916</span> <span class="year-stamp">Dada</span> </a> <p class="year-feeling">nonsense against war, clarity against chaos</p> <p class="year-sub">Dada begins in neutral Zurich as nonsense against war, while Edward Johnston gives the Underground a disciplined alphabet for modern public life.</p> <ul class="year-lens"> <li>dada is born at Cabaret Voltaire as anti-art, performance, and protest</li> <li>public lettering becomes modern, legible, and humane through Johnston Sans</li> <li>wartime graphic systems intensify through recruitment, bonds, and morale</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1916/index.html">Example</a> <a href="corpus/1916.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #6f3b2c; --card-b: #a83a25; --card-c: #5a6b3f;"> <a class="year-open" href="examples/1917/index.html" aria-label="Open the 1917 example"> <span class="year-num">1917</span> <span class="year-stamp">De Stijl</span> </a> <p class="year-feeling">the future trying to draw itself as a hard line</p> <p class="year-sub">De Stijl begins in the Netherlands, Duchamp turns a urinal into a question, Russia enters revolution, and the Uncle Sam poster proves direct address...</p> <ul class="year-lens"> <li>geometric abstraction turns toward vertical, horizontal, primary-color order</li> <li>the Russian Revolution gives constructivist energy a political horizon</li> <li>dada and Duchamp make authorship, selection, and context design questions</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1917/index.html">Example</a> <a href="corpus/1917.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #c0341f; --card-b: #1d1b18; --card-c: #c79a3c;"> <a class="year-open" href="examples/1918/index.html" aria-label="Open the 1918 example"> <span class="year-num">1918</span> <span class="year-stamp">Armistice</span> </a> <p class="year-feeling">a world ending in noise while abstraction lowers its voice to white</p> <p class="year-sub">The war ends, De Stijl publishes its manifesto, Malevich paints white on white, and the modern surface becomes austere, exhausted, and newly absolute.</p> <ul class="year-lens"> <li>the Armistice turns propaganda from mobilization toward victory, mourning, and reconstruction</li> <li>De Stijl states its program as a manifesto of new visual order</li> <li>Malevich's White on White pushes abstraction toward near-disappearance</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1918/index.html">Example</a> <a href="corpus/1918.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #33484f; --card-b: #cfa94a; --card-c: #2c2a26;"> <a class="year-open" href="examples/1919/index.html" aria-label="Open the 1919 example"> <span class="year-num">1919</span> <span class="year-stamp">Bauhaus</span> </a> <p class="year-feeling">a workshop trying to build a future from ruins</p> <p class="year-sub">The Bauhaus opens in Weimar, Gropius calls for a new unity of art and craft, and postwar Europe begins converting avant-garde rupture into institutio...</p> <ul class="year-lens"> <li>the Bauhaus is founded as a school, manifesto, and reconstruction project</li> <li>Tatlin's tower and Lissitzky's Proun works point toward constructivist space</li> <li>postwar graphics shift toward republics, revolutions, strikes, and rebuilding</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1919/index.html">Example</a> <a href="corpus/1919.md">Corpus.md</a> </span> </div> </article> </div> </section> <section class="decade" id="1920s" aria-label="The 1920s"> <header class="decade-head"> <h2 class="decade-title">1920s</h2> <span class="decade-note">the grid is invented</span> </header> <div class="console"> <article class="year" style="--card-a: #d8332b; --card-b: #1f6fb2; --card-c: #f2c33b;"> <a class="year-open" href="examples/1920/index.html" aria-label="Open the 1920 example"> <span class="year-num">1920</span> <span class="year-stamp">Jazz age</span> </a> <p class="year-feeling">postwar order learning to dance</p> <p class="year-sub">A postwar world tries to become modern in public: radio crackles, jazz travels, Bauhaus basics begin, and abstraction searches for a usable social sh...</p> <ul class="year-lens"> <li>postwar reconstruction turns modern design into a civic and domestic question</li> <li>the Bauhaus begins translating craft, color, and form into a new educational method</li> <li>De Stijl and constructivist currents make abstraction feel practical and social</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1920/index.html">Example</a> <a href="corpus/1920.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #1c1c1c; --card-b: #2f7d6b; --card-c: #9c3b2f;"> <a class="year-open" href="examples/1921/index.html" aria-label="Open the 1921 example"> <span class="year-num">1921</span> <span class="year-stamp">Bauhaus</span> </a> <p class="year-feeling">modernism learning its exercises</p> <p class="year-sub">Modernism becomes more teachable: Bauhaus foundations, constructivist method, De Stijl discipline, and a public culture learning to read sharper form...</p> <ul class="year-lens"> <li>the Bauhaus foundation course turns perception, material, and form into pedagogy</li> <li>constructivism begins defining art as construction for a new society</li> <li>De Stijl geometry and color discipline spread as a design language</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1921/index.html">Example</a> <a href="corpus/1921.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #f0c63e; --card-b: #16181b; --card-c: #e23b2c;"> <a class="year-open" href="examples/1922/index.html" aria-label="Open the 1922 example"> <span class="year-num">1922</span> <span class="year-stamp">Deco debut</span> </a> <p class="year-feeling">angular modernism under a gold spotlight</p> <p class="year-sub">Constructivist books, Bauhaus experiments, Egyptian spectacle, and modern fashion make the year feel angular, public, and newly theatrical.</p> <ul class="year-lens"> <li>constructivism turns page, poster, and object into instruments of action</li> <li>El Lissitzky's About Two Squares makes abstract geometry behave like a public story</li> <li>the Bauhaus deepens workshop experiment before its major public exhibition</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1922/index.html">Example</a> <a href="corpus/1922.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #1a1714; --card-b: #b8862f; --card-c: #2c6b63;"> <a class="year-open" href="examples/1923/index.html" aria-label="Open the 1923 example"> <span class="year-num">1923</span> <span class="year-stamp">Machine modern</span> </a> <p class="year-feeling">the machine becoming a domestic philosophy</p> <p class="year-sub">The Bauhaus opens itself to the public, Le Corbusier publishes the machine-for-living polemic, and modernism starts sounding less like experiment tha...</p> <ul class="year-lens"> <li>the Bauhaus exhibition makes workshop modernism visible to a broader public</li> <li>Le Corbusier's Vers une architecture turns machines, standards, and houses into a manifesto</li> <li>constructivist and De Stijl geometry move from art argument toward design system</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1923/index.html">Example</a> <a href="corpus/1923.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #d8332b; --card-b: #1f6fb2; --card-c: #f2c33b;"> <a class="year-open" href="examples/1924/index.html" aria-label="Open the 1924 example"> <span class="year-num">1924</span> <span class="year-stamp">Roaring line</span> </a> <p class="year-feeling">the dream and the grid waiting for Paris</p> <p class="year-sub">Surrealism names the unconscious, Rietveld builds De Stijl into a house, and modernism prepares the arguments that Paris will stage one year later.</p> <ul class="year-lens"> <li>Surrealism publishes its first manifesto and gives design a dream logic to resist pure rationalism</li> <li>Rietveld's Schroder House turns De Stijl planes into built domestic space</li> <li>constructivism, Bauhaus practice, and machine rhetoric keep hardening modern graphic language</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1924/index.html">Example</a> <a href="corpus/1924.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #1c1c1c; --card-b: #2f7d6b; --card-c: #9c3b2f;"> <a class="year-open" href="examples/1925/index.html" aria-label="Open the 1925 example"> <span class="year-num">1925</span> <span class="year-stamp">Deco debut</span> </a> <p class="year-feeling">luxury and the machine arguing over the same future</p> <p class="year-sub">Paris stages the exposition that will later be called Art Deco, the Bauhaus reopens in Dessau, and luxury ornament and machine geometry argue in publ...</p> <ul class="year-lens"> <li>the Paris Exposition turns decorative modernity into an international style</li> <li>the Bauhaus moves to Dessau and rebuilds modernism as a working method</li> <li>constructivism and De Stijl push geometry, machine logic, and red-black abstraction</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1925/index.html">Example</a> <a href="corpus/1925.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #f0c63e; --card-b: #16181b; --card-c: #e23b2c;"> <a class="year-open" href="examples/1926/index.html" aria-label="Open the 1926 example"> <span class="year-num">1926</span> <span class="year-stamp">Dessau</span> </a> <p class="year-feeling">the future moves indoors and starts using a grid</p> <p class="year-sub">The Bauhaus opens its Dessau building, tubular steel learns to float, and jazz-age fashion turns black, glass, chrome, print, and film into a sharper...</p> <ul class="year-lens"> <li>the Bauhaus building makes modern design visible as architecture, school, and system</li> <li>tubular steel furniture shifts from experiment toward industrial language</li> <li>constructivist and Bauhaus graphics turn the page into a machine field</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1926/index.html">Example</a> <a href="corpus/1926.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #1a1714; --card-b: #b8862f; --card-c: #2c6b63;"> <a class="year-open" href="examples/1927/index.html" aria-label="Open the 1927 example"> <span class="year-num">1927</span> <span class="year-stamp">Futura</span> </a> <p class="year-feeling">the modern line learns to speak to crowds</p> <p class="year-sub">Futura, Weissenhof, Metropolis, the talkie, and the machine-age poster make the future readable as type, housing, speed, sound, and cinematic city.</p> <ul class="year-lens"> <li>Futura turns geometric sans-serif into a commercial modern voice</li> <li>the Weissenhof Estate makes white-wall modern housing public and controversial</li> <li>Metropolis gives the machine city its most influential cinematic image</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1927/index.html">Example</a> <a href="corpus/1927.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #d8332b; --card-b: #1f6fb2; --card-c: #f2c33b;"> <a class="year-open" href="examples/1928/index.html" aria-label="Open the 1928 example"> <span class="year-num">1928</span> <span class="year-stamp">New type</span> </a> <p class="year-feeling">modernism becomes a manual for use</p> <p class="year-sub">Tschichold publishes the New Typography, CIAM forms at La Sarraz, Hannes Meyer redirects the Bauhaus, and synchronized cartoons prove that motion can...</p> <ul class="year-lens"> <li>Jan Tschichold codifies modern typography as a practical discipline</li> <li>CIAM turns modern architecture into an international program</li> <li>Hannes Meyer shifts the Bauhaus toward social need, standardization, and collective method</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1928/index.html">Example</a> <a href="corpus/1928.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #1c1c1c; --card-b: #2f7d6b; --card-c: #9c3b2f;"> <a class="year-open" href="examples/1929/index.html" aria-label="Open the 1929 example"> <span class="year-num">1929</span> <span class="year-stamp">Glass fall</span> </a> <p class="year-feeling">polished modernity at the edge of collapse</p> <p class="year-sub">The Barcelona Pavilion, E-1027, Film und Foto, MoMA, talking musicals, and the crash make the decade's polished modern surfaces feel suddenly fragile.</p> <ul class="year-lens"> <li>the Barcelona Pavilion turns modern architecture into marble, glass, chrome, and space</li> <li>Eileen Gray's E-1027 makes modern domesticity intimate, adjustable, and coastal</li> <li>Film und Foto makes New Vision photography and film central to modern graphic culture</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1929/index.html">Example</a> <a href="corpus/1929.md">Corpus.md</a> </span> </div> </article> </div> </section> <section class="decade" id="1930s" aria-label="The 1930s"> <header class="decade-head"> <h2 class="decade-title">1930s</h2> <span class="decade-note">streamline and deco</span> </header> <div class="console"> <article class="year" style="--card-a: #2f7d8a; --card-b: #d9762f; --card-c: #e8c24a;"> <a class="year-open" href="examples/1930/index.html" aria-label="Open the 1930 example"> <span class="year-num">1930</span> <span class="year-stamp">Chrome cliff</span> </a> <p class="year-feeling">chrome optimism at the edge of scarcity</p> <p class="year-sub">The Chrysler Building crowns Deco New York, the Bauhaus changes hands under pressure, and industrial design begins selling the Depression a sleeker m...</p> <ul class="year-lens"> <li>the Chrysler Building turns Art Deco into a skyscraper silhouette</li> <li>Raymond Loewy proves industrial design can make office machinery desirable</li> <li>the Bauhaus shifts from Meyer to Mies as politics tightens around modernism</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1930/index.html">Example</a> <a href="corpus/1930.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #7a3b2c; --card-b: #3f6b5e; --card-c: #1c1814;"> <a class="year-open" href="examples/1931/index.html" aria-label="Open the 1931 example"> <span class="year-num">1931</span> <span class="year-stamp">Hard glamour</span> </a> <p class="year-feeling">monumental confidence with a shadow behind it</p> <p class="year-sub">The Empire State Building opens into Depression air, Universal horror invents new shadows, and modern design learns to be monumental without pretendi...</p> <ul class="year-lens"> <li>the Empire State Building makes height a Depression-era symbol</li> <li>Universal horror turns set design, typography, makeup, and shadow into icons</li> <li>Harry Beck drafts a diagrammatic transit future before the public sees it</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1931/index.html">Example</a> <a href="corpus/1931.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #e3b441; --card-b: #1a1c18; --card-c: #d24b2c;"> <a class="year-open" href="examples/1932/index.html" aria-label="Open the 1932 example"> <span class="year-num">1932</span> <span class="year-stamp">Public modern</span> </a> <p class="year-feeling">public modernity under Depression lights</p> <p class="year-sub">MoMA names the International Style, Radio City turns Deco into a total interior, Times New Roman enters newspaper authority, and the Depression learn...</p> <ul class="year-lens"> <li>MoMA canonizes the International Style as modern architecture</li> <li>Radio City Music Hall makes American Deco immersive, public, and theatrical</li> <li>Times New Roman begins a new standard for newspaper text authority</li> </ul> <div class="year-foot"> <span class="year-count">4 recipes</span> <span class="year-links"> <a href="examples/1932/index.html">Example</a> <a href="corpus/1932.md">Corpus.md</a> </span> </div> </article> <article class="year" style="--card-a: #6f4a30; --card-b: #c0392b; --card-c: #3f6f6b;"> <a class="year-open" href="examples/1933/index.html" aria-label="Open the 1933 example"> <span class="year-num">1933</span> <span class="year-stamp">After Bauhaus</span> </a> <p class="year-feeling">a broken school and a clearer map</p> <p class="year-sub">The Bauhaus closes, Beck's Tube map reaches the public, Chicago stages a scientific future, and New Deal art begins turning public need into designed...</p> |
| You are visitor 01402520 — GeezerVison does not store the pages you look up. Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required. |